jedi validate
v1.5.6
Jedi Validate 是一个轻量级的表单验证组件。
这是一个 JS 类，您可以通过传入 DOM 元素和选项对象来创建新实例。
// npm install jedi-validate
import JediValidate from 'jedi-validate' ;
const JediValidate = new JediValidate ( document . querySelector ( '#form5' ) ) ;默认情况下，表单将通过 ajax 发送，参数在 HTML 中设置。
因为它提供了严格的 json 格式进行交互，所以您可以通过多种不同的方式发送表单：
但服务器响应始终具有一种结构。更容易实施。
如果您想构建源代码、运行测试或做出贡献，请首先将此存储库分叉或克隆到您的本地计算机上。确保 NodeJS 和 npm 已安装。使用node -v和npm -v检查终端。
要首先运行安装项目依赖项，
npm install
要构建源代码并观察终端运行中的变化，
npm run build
要捆绑源并将其提供给localhost:4000运行，
npm run dev
这将打开一个 webpack 本地服务器，您可以在其中导航到所需的目录或资源。测试页面位于example/bootstrap.html
测试尚未完成，尝试在控制台或通过测试浏览器运行测试时会出现运行时错误。
有以下三种类型的选项：
{
ajax : {
url : null ,
enctype : 'application/x-www-form-urlencoded' ,
sendType : 'serialize' , // 'formData', 'json'
method : 'GET'
} ,
rules : { } ,
messages : { } ,
containers : {
parent : 'form-group' ,
message : 'help-block' ,
baseMessage : 'base-error'
} ,
states : {
error : 'error' ,
valid : 'valid' ,
pristine : 'pristine' ,
dirty : 'dirty'
} ,
callbacks : {
success : function ( ) {
} ,
error : function ( ) {
}
} ,
clean : true ,
redirect : true
}在 ajax 选项下，我们定义如何发送表单。如果我们不想发送表单，它可以为null ，也可以是具有以下选项的对象：
默认值： null可以被action表单属性或 init 选项覆盖。
默认值： 'application/x-www-form-urlencoded'可以被enctype表单属性、init 选项或sendType覆盖。
默认值： 'GET'可以被method表单属性或 init 选项覆盖。
默认值： 'serialize'
您可以通过三种不同的方式编码和发送数据。有效选项有：
'formData' - 将表单作为 FormData 发送。 'Content-type'到'multipart/form-data''json' - 将表单作为 JSON 对象发送。将'Content-type'设置为'application/json; charset=utf-8''serialize' - 作为常规请求发送表单。将'Content-type'设置为'application/x-www-form-urlencoded'文件只能使用“formData”编码发送。
name=111&phone=222222222&email=wow%40wow.com
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="name"
111
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="phone"
222222222
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="email"
...
{ "name" : " 111 " , "phone" : " 222222222 " , "email" : " [email protected] " , "file" : " index.html " }用于验证输入的规则。每个表单元素都将通过“name”属性与相应的规则（如果存在）进行匹配。如果不存在规则，则不会进行验证。
默认情况下，规则未定义，但可以通过属性、HTML 中的类或 init 选项进行设置。
- 必需：布尔值
- 正则表达式：正则表达式
- 电子邮件：布尔值
- 电话：布尔值
- 网址：布尔值
- 文件大小： 数量
- 扩展名：字符串
可以使用这些属性
- 类型 - 电子邮件、电话或 url（正则表达式将用于每种类型）
- 模式 - 具有属性值的正则表达式
- 必需 - 检查输入是否为空值
例子：
< input id =" name " type =" text " name =" name " required class =" required " >
< input id =" email " type =" email " name =" email " class =" required " >您可以使用addMethod函数设置自己的规则：
JediValidate . addMethod ( 'methodName' , function ( value , options ) {
return true // true if valid
} , 'Error message' ) ;初始化时添加规则作为选项对象的一部分：
const validator = new JediValidate ( formWrapper , {
rules : {
name : {
required : true
} ,
email : {
email : true
} ,
phone : {
regexp : / ^([+]+)*[0-9x20x28x29-]{5,20}$ /
} ,
file : {
filesize : 10000 ,
extension : "html|css|txt"
}
file2 : {
filesize : [ 10000 , "two-files-checkbox" ] , // check only if checkbox checked
extension : [ "html|css|txt" , "two-files-checkbox" ] , // without recollect by default
another : [ 'param' , function ( oldData ) {
const newData = validator . collect ( 'two-files-checkbox' ) ; // manual data recollect for concrete field
return ! ! newData [ 'two-files-checkbox' ] ;
} ] ;
}
}
} ) ;您可以从整个表单或仅通过输入名称重新收集数据。该方法返回新数据。
validator . collect ( ) ; // all form
validator . collect ( 'two-files-checkbox' ) ; // one field 您可以定义自己的错误消息，以防验证失败。如果表单元素验证失败，则将应用与该元素的“name”属性对应的消息。
messages : {
phone : {
regexp : "Invalid phone number"
} ,
file : {
filesize : "File is too big"
}
} ,
