X-Ray Javascript 表单验证框架 (原创)

像HTML一样简单的X-Ray Javascript 表单验证框架。

这是什么
X-Ray Javascript 表单验证框架是基于Jquery的网页输入类标签验证工具。


易用性
本文下面列举了框架目前支持的所有用法。

------> 下载文件. 

开始使用: 

事先请导入Jquery文件,然后再导入js插件文件到你的页面:

    <script src="...[Your path]/x-ray-form-validation.cn.min.js"></script>

用于表单提交:
    <form id="xrayexample" onsubmit="return validateForm();">
用于Ajax提交
...
    if(validateForm()){提交表单的代码...}
...

你可以联合使用以下所有可能的验证规则,但是不要产生矛盾。比如如果你同时设置了max-length=5, min-length=6,就会产生无法通过验证的情况。系统对于所有验证都有默认的错误提示信息,你也可以自定义你所需要的。

非空判断:
<input type="text" id="xray_example"
data-not-empty="true"
data-empty-message="不能为空。" />

最大长度判断:
 <input type="text" id="xray_example"
data-max-length="30"
data-max-length-message="长度不能少于30。" />

最小长度判断:
 <input type="text" id="xray_example"
data-min-length="6"
data-min-length-message="长度不能大于6。" />

信息一致判断:
 <input type="text" id="xray_example_1"
data-identical="自定义值" data-identical-message="这两项必须保持一致" />
 <input type="text" id="xray_example_2"
data-identical="自定义值" />
Ps: 所有保持一致值输入项的data-identical值必须一样。可以是任意值。自定义错误消息写在第一个输入项里。

预设值判断: 
预设电子邮件
<input type="text" id="xray_example"
data-type-preset="email" 
data-type-preset-email-message="[Your own error message, optional]" />
只能判断邮件格式是否正确,不能判断邮件是否真实存在。

预设用户名判断
<input type="text" id="xray_example"
data-type-preset="preset_username"
data-type-preset-username-message="[Your own error message, optional]" />
没有长度检查,可以和长度判断何用。只允许字母,数字和下划线。

预设密码判断
<input type="text" id="xray_example"
data-type-preset="preset_password" 
data-type-preset-password-message="[Your own error message, optional]" />
允许字母,数字,下划线和其他字符。最小长度为6。data-min-length不起作用,但是data-max-length可以限制最大长度。带有密码强度检测,如果只有字母,数字,下划线和其他字符中的一种,文本框变味红色, 如果有两种,文本框变为黄色,如果全有,文本框变为绿色。

预设美国电话格式验证
<input type="text" id="xray_example"
data-type-preset="preset_us_phone" 
data-type-preset-us_phone-message="[Your own error message, optional]" />

预设数字验证
<input type="text" id="xray_example"
data-type-preset="preset_number" 
data-type-preset-number-message="[Your own error message, optional]" />
只能为数字。没有长度限制。允许有正负号。

预设正整数验证
<input type="text" id="xray_example"
data-type-preset="preset_positive_number" 
data-type-preset-positive_number-message="[Your own error message, optional]" />
只能为数字。没有长度限制。不允许有负号。

预设负整数验证
<input type="text" id="xray_example"
data-type-preset="preset_negative_number" 
data-type-preset-negative_number-message="[Your own error message, optional]" />
只能为数字。没有长度限制。只允许有负号。

预设字母验证
<input type="text" id="xray_example"
data-type-preset="preset_letters" 
data-type-preset-letters-message="[Your own error message, optional]" />
只允许大写或者小写形式的字母,没有长度限制。

预设中国移动电话格式验证
<input type="text" id="xray_example"
data-type-preset="preset_cn_mobile_phone" 
data-type-preset-cn_mobile_phone-message="[Your own error message, optional]" />
固定长度为11。注意不要和最小和最大长度混用,容易造成验证不通过。第一位必须是1,第二位必须是3,5,6或8。

预设浮点数验证
<input type="text" id="xray_example"
data-type-preset="preset_decimal" dot_left_len="6"[optional]  dot_right_len="2"[optional] 
data-type-preset-decimal-message="[Your own error message, optional]" />
小数点左边和右边的长度可以自定义,默认是左边3为,右边2为,即xxx.xx。注意,当你指定小数点右边位数为0时,系统自动删除小数点,变为整数。允许负号。






你可能感兴趣的:(JavaScript,js,form,validation,framework,表单验证,js表单验证,js表单验证框架,表单验证框架)