表单验证 [JS]
除了原生的表单验证外,框架还提供了JS的验证方式:
验证显示
在“输入框组”一节中,已介绍了表单验证的显示样式,具体表现为通过输入框为绿色文字和边框,不通过则为红色文字和边框:
提示样式
除这个提示外,也可在form标签处添加.validate-tips
样式,显示样式则改为提示样式显示。
<form class="form form-x validate-tips">
......
</form>
验证方法
- 首先定义需要验证的表单ID值;
- 其次在需要验证的input标签上定义好验证属性
data-validate
的值,值为JSON格式,如邮箱验证data-validate='{"required":true,"email":true,"length":">=10","valid":"邮箱正确","invalid":"请填写10个以上字符的邮箱地址"}'
- 最后再调用验证方法,调用示例如下:
<form id="validate"> ... </form> <script> $(function(){ $('#validate').validate(); }); </script>
邮箱验证示例
<form class="form" id="emailvalidate"> <div class="input-group"> <label>邮箱</label> <div class="input-block"> <input class="input" placeholder="请输入您的邮箱" type="text" data-validate='{"required":true,"email":true,"length":">=10","valid":"邮箱正确","invalid":"请填写10个以上字符的邮箱地址"}' /> </div> </div> <div class="form-button"> <button type="submit" class="button">提交</button> </div> </form> <script> $(function(){ $('#emailvalidate').validate(); }); </script>
不参与验证
当某个输入框存在且有相关验证规则,但特定情形下不参与验证时,可在.input-block
上叠加.input-novalidate
样式,即不参与验证,如下示例中的手机输入框。
<form class="form validate-tips" id="novalidate">
<div class="input-group">
<label>邮箱</label>
<div class="input-block">
<input class="input" placeholder="请输入您的邮箱" type="text" data-validate='{"required":true,"email":true,"invalid":"请填写正确的邮箱地址"}' />
</div>
</div>
<div class="input-group">
<label>手机</label>
<div class="input-block input-novalidate">
<input class="input" placeholder="请填写你的手机号码" type="text" data-validate='{"required":true,"mobile":true,"invalid":"请填写中国大陆的手机号码"}' />
</div>
</div>
<div class="form-button">
<button type="submit" class="button">提交</button>
<button type="reset" class="button">重置</button>
</div>
</form>
<script>
$(function(){
$('#novalidate').validate();
});
</script>
验证类别
框架定义了三类验证类型,一为验证结果的提示验证,二为验证是否的布尔验证,三是比较结果的比较验证。
提示验证
框架定义了valid验证成功及invalid验证失败提示,在有布尔验证或比较验证时有效,设置后可显示提示文本,无文本提示时不设置;
类别 | 示例 | 说明 |
---|---|---|
valid | "valid":"校验通过" | 校验成功提示信息。 |
invalid | "invalid":"校验不通过" | 校验失败提示信息。 |
布尔验证
如{"required":true,"email":true}
,其验证的类别有两个,一个是required,要求此输入框为必填,在未填写的情况,验证不通过;另一个是email,要求输入框输入内容为邮件,输入其他内容则验证不通过;条件均满足的情况下才通过验证。
框架已定义了常用的布尔验证类别,类别内容请参考下表;错误提示内容自主定义;
类别 | 示例 | 说明 |
---|---|---|
required | "required":true | 必填,内容不能为空。 |
chinese | "chinese":true | 要求输入值为中文 |
english | "english":true | 要求输入值为英文 |
number | "number":true | 要求输入值为数字 |
username | "username":true | 要求输入值为英文字母开头的字母、下划线、数字 |
password | "password":true | 要求输入的密码必须包含字母、数字、特殊字符三种且长度至少8位。 |
integer | "integer":true | 要求输入值为整数(正整数或负整数,0) |
plusinteger | "plusinteger":true | 要求输入值为正整数 |
double | "double":true | 要求输入值为正负小数 |
plusdouble | "plusdouble":true | 要求输入值为正小数 |
mobile | "mobile":true | 要求输入值为手机号码,号码段为:1(3|4|5|6|7|8|9)开头的中国大陆手机号。 |
phone | "phone":true | 要求输入值为固定电话,格式包含:10000 或 66668888 或 010-6660888 或 0688-66608888-6688 |
tel | "tel":true | 要求输入值为固定电话或手机 |
"email":true | 要求输入值为邮件 | |
url | "url":true | 要求输入值为网址 |
ip | "ip":true | 要求输入值为IPv4地址 |
currency | "currency":true | 要求输入值为货币值 |
zip | "zip":true | 要求输入值为邮编 |
idcard | "idcard":true | 要求输入值为中国大陆身份证号码 |
"qq":true | 要求输入值为QQ号 | |
radio | "radio":true | 要求单选框必须选择一个值 |
比较验证
比较验证与类别验证相同,只是值不同,格式为{"length":">=3","compare":">=500"}
,即输入框的字符长度少于3个符,值大于500,否则不通过验证。
参数 | 比较方式 | 示例 | 说明 |
---|---|---|---|
compare | 等于:== 大于:> 大于等于:>= 小于:< 小于等于:<= |
"compare":"==10" "compare":">=10" "compare":"<10" |
数值比较,当前值与比较值的验证 |
length | 等于:== 大于:> 大于等于:>= 小于:< 小于等于:<= |
"length":"==10" "length":">10" "length":"<=10" |
当前字符长度与比较字符长度的验证 |
equal | 值 | "equal":"yes" | 用于字符串,当前值为yes时才通过验证 |
least | 可选值名称 | "least":"mobile,phone,email" | 手机、电话、邮箱至少一项不为空,多个name用英文,逗号分隔。 |
pattern | 正则表达式 | "pattern":"^1(3|4|5|6|7|8|9)\d{9}$" | 输入值符合正则表达式规,如示例要求输入手机号码 |
repeat | 对比值的名称 | "repeat":"password" | 输入值与对比名称(如password)值是否相同 |
file | 文件 | "file":{"ext":"jpeg,jpg,png,gif","size":"<1024","type":"image"} | 文件验证为json内容,其中ext为允许的文件后续;size为文件大小最大值,单位为KB;type为类型,值为file|image ,此属性专门为上传美化样式而处理。 |
ajax | 异步验证 | "ajax":{"url":"/2.0/data/validate-ajax.html","data":"mobile"} |
输入值ajax验证,返回数据为JSON格式,当返回"error":0 则符合,其他则不通过;如验证通过{"error":0,"msg":"校验成功"} ,验证不通过{"error":1,"msg":"校验失败"} 。在验证时,除了传递自身的值外,也可能需要传递其他参数值,则添加参数 "data":"mobile,email" ,多个参数名称name用英文,逗号分隔。当返回 msg 值时,提示显示msg的内容。同时还可以针对结果调用函数处理数据,方法为下文的“提交参数”内容中介绍。 |
框架未定义的验证类别,则可以通过pattern类别来自定义验证规则。
提交参数
框架同时还定义了提交时的参数设置,进一步方便了用户的体验;
在需要弹出对话框的情况下,需要用到对话框相关的JS功能。
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
valid | string | / | 验证通过时通用提示信息,当无自定义的valid时显示 |
toggle | object | / | 提交按钮的对象,如#id或.class |
confirm | json | / | 弹出确认框参数,json格式,详细查看对话框 |
async | bool | false | 是否异步提交,true时则异步 |
ajax_name | function | / | name为输入框名称,如示例中的email,即为name="email" 执行验证类型为ajax时执行的函数,同时返回JSON格式的异步数据data 值; |
onsubmit | function | / | 正在提交时执行的函数 |
success | function | / | 异步提交成功时执行的函数,同时返回JSON格式的异步数据data 值。 |
使用方法为
<form id="submitform"> ... </form> <script> $(function(){ $('#form').validate({ "valid":"通过校验", "confirm":{ "target":{ "id":"dialog", "text":"确认提交表单?", "confirm":"确认", "cancel":"取消", }, "dismiss":false }, "async":true, "ajax_email":function(data){console.log(data);}, "onsubmit":function(){console.log("onsubmit");}, "success":function(data){console.log(data);}, }); }); </script>
验证示例
常用的验证类型及示例,如注册:
<form class="form validate-tips" id="demo" enctype="multipart/form-data" method="post" action="/2.0/data/ajax-data.php"> <div class="input-group"> <label>手机</label> <div class="input-block"> <div class="input-inline"> <input type="text" name="mobile" id="mobile" value="13800138000" class="input" placeholder="请输入您的手机号码" data-validate='{"required":true,"mobile":true,"ajax":{"url":"/2.0/data/validate-ajax-mobile.php","data":"email,fullname"},"invalid":"请输入手机号码"}' /> <div class="addon"><input class="button" id="sendsms" name="sendsms" type="button" value="手机验证码" /></div> </div> <div class="input-help input-help-right">13800138000已存在无法通过,改为其他值则通过校验。</div> </div> </div> <div class="input-group"> <label>验证码</label> <div class="input-block"> <input type="text" name="code" class="input" placeholder="请输入6位数验证码" data-validate='{"required":true,"number":true,"length":"==6","ajax":{"url":"/2.0/data/validate-ajax-code.php","data":"mobile"},"invalid":"验证码有误"}' /> <div class="input-help input-help-right">改变手机号码或输入错误的验证码均无法通过校验</div> </div> </div> <div class="input-group"> <label>邮箱</label> <div class="input-block"> <input type="text" name="email" class="input" placeholder="请输入您的邮箱" data-validate='{"required":true,"email":true,"invalid":"请输入邮箱"}' /> </div> </div> <div class="input-group"> <label>头像</label> <div class="input-block"> <div class="input-upimage"> <a href="javascript:;"> <input name="face" type="file" data-validate='{"required":true,"file":{"ext":"jpeg,jpg,png,gif","size":"<1024","type":"image"},"invalid":"请上传1M以内的jpg,jpeg,png,gif图片"}' /> </a> <span></span> <img name="image" /> </div> </div> </div> <div class="input-group"> <label>姓名</label> <div class="input-block"> <input type="text" name="fullname" class="input" placeholder="请输入中文姓名" data-validate='{"required":true,"chinese":true,"invalid":"请输入中文姓名"}' /> </div> </div> <div class="input-group"> <label>性别</label> <div class="input-block input-novalidate"> <div class="input-check input-check-inline"> <label><input type="radio" name="sex" value="0" data-validate='{"required":true,"radio":true,"invalid":"请选择性别"}' /><i></i> 女士</label> <label><input type="radio" name="sex" value="1" /><i></i> 先生</label> <label><input type="radio" name="sex" value="2" /><i></i> 保密</label> </div> <div class="input-help">已设为不参与验证</div> </div> </div> <div class="input-group"> <label>密码</label> <div class="input-block"> <input type="password" name="password" class="input" placeholder="请输入密码" data-validate='{"required":true,"password":true,"invalid":"密码必须包含字母、数字、特殊字符三种且长度至少8位"}' /> </div> </div> <div class="input-group"> <label>重复密码</label> <div class="input-block"> <input type="password" name="repassword" class="input" placeholder="请输入密码" data-validate='{"required":true,"password":true,"repeat":"password","invalid":"两次输入的密码不一致"}' /> </div> </div> <div class="form-button"> <button type="submit" id="demosubmit" class="button">提交</button> <button type="reset" class="button">重置</button> </div> </form>
JS调用
<script> $(function(){ $('#demo').validate({ "valid":"通过校验", "toggle":"#demosubmit", "confirm":{ "target":{"id":"democonfirm","text":"确认提交?","confirm":"提交","cancel":"取消","block":true}, "dismiss":false }, "async":1, "ajax_mobile":function(data){console.log(data);}, "onsubmit":function(){ $().dialog({ "target":{"id":"demoonsumbit","text":"<div class=\"loader\"><i></i></div><br />正在提交"}, "dismiss":false }); }, "success":function(data){ $().dialog({"close":"#demoonsumbit"}); $().dialog({ "target":{"id":"demosuccess","text":data["msg"],"dark":true}, "style":"margin-top", "show":"fixed-top-center", "dismiss":false, "cover":false, "timer":2 }); }, }); //短信发送 $("#sendsms").button({ "validate":{ "data":"#mobile", "attr":{"text":"手机有误","class":"button"} }, "confirm":{ "dialog":{"target":"#smsdialog","dismiss":false}, "attr":{"text":"正在确认","class":"button","disabled":true}, "function":function(){ //触发验证框 $("#smsdialog").find('[data-form="verify"]').trigger("click"); //这里可以加入获取验证码的函数 } }, "ajax":{ "url":"/2.0/data/validate-ajax-code.php", "data":"#mobile,#email", "attr":{"text":"正在发送","class":"button border-main"}, "function":function(data){ $("#sendsms").val(data["msg"]); var $text="请输入验证码,10分钟有效期。<br /><span class=\"size-large\">"+data["code"]+"</span>"; $().dialog({ "target":{"id":"codevalue","text":$text,"close":true}, "dismiss":false }); } }, "timer":{ "attr":{"text":"开始倒计时","class":"button bg-danger"}, "second":10, "text":"#s# 秒倒计时", "function":function(data){ $("#sendsms").removeClass("bg-danger").attr("disabled",false).val("重新发送"); }, }, }); }); </script>
验证对话框
<div class="dialog" id="smsdialog"> <form id="dialog-verify" class="dialog-body dialog-content"> <div class="dialog-text"> <p>请输入验证码<br /><span class="size-large text-main">123456</span></p> <div class="input-group"> <div class="input-block" align="center"> <div class="input-verify" data-form="verify"> <input type="text" id="verify" name="verify" id="verify" maxlength="6" class="input" data-validate='{"required":true,"ajax":{"url":"/2.0/data/button-ajax-verify.php","data":"#mobile"},"invalid":"请输入验证码"}' /> <ul><li></li><li></li><li></li><li></li><li></li><li></li></ul> </div> </div> </div> <div data-confirm="dialog" class="hidden">确定</div> </div> <div data-cancel="dialog" class="dialog-confirm">关闭</div> </form> </div> <script> $(function(){ $('#dialog-verify').validate({ "ajax_verify":function(data){ if(data["error"]===0){ $("#smsdialog").find('[data-confirm="dialog"]').trigger("click"); } } }); }); </script>