jQuery EasyUI 表单 - 表单验证插件validatebox
使用时需要向页面引入两个css文件如下:
<link rel="stylesheet" href="css/icon.css">
<link rel="stylesheet" href="css/easyui.css">
还需要引入三个外部js库
<script src="js/jquery-1.12.3.min.js" type="text/javascript"></script>
<script src="js/jquery.easyui.min.js" type="text/javascript"></script>
//这是中文简体语言包
<script src="js/easyui-lang-zh_CN.js" type="text/javascript"></script>
validatebox表单验证实例
1 $(function () { 2 $("#name").validatebox({ 3 required:true, 4 validType:['minlengthUser[6]','maxlengthUser[16]','checkUser'], 5 missingMessage:"请输入用户名" 6 7 }) 8 9 //自定义验证规则 10 $.extend($.fn.validatebox.defaults.rules,{ 11 12 //验证用户名的格式 13 checkUser:{ 14 validator:function (value, param) { 15 return /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/.test(value) 16 }, 17 message:"6~18个字符，可使用字母、数字、下划线，需以字母开头" 18 }, 19 20 }) 21 //easyui表单提交的控制 22 $('#loginForm').form({ 23 24 onSubmit:function(){ 25 return $(this).form('validate'); 26 }, 27 success:function(){ 28 $.messager.alert('Info', "恭喜您,注册成功!"); 29 } 30 }); 31 })
validate表单验证
需要引入两个外部js库
<script src="js/jquery-1.12.3.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js"></script>
validate表单验证实例
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>验证框架的使用</title> 6 7 <style type="text/css"> 8 .error{ 9 color: red; 10 } 11 </style> 12 </head> 13 <body> 14 <form action="success.html" method="post" id="myForm"> 15 用户名：<input name="userName"> <br/> 16 密码：<input name="password" type="password" id="pwd"> <br/> 17 确认密码：<input name="repPassword"type="password" > <br/> 18 邮箱：<input name="email"> <br/> 19 手机号：<input name="phone"> <br/> 20 性别：<input name="sex" type="radio" value="男" checked>男 21 <input name="sex" type="radio" value="女">女<br/> 22 是否同意协议<input type="checkbox" name="context"><br/> 23 <button type="submit">注册</button> 24 </form> 25 26 27 <!--引入需要的js库--> 28 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 29 <script type="text/javascript" src="../js/jquery.validate.js"></script> 30 <script type="text/javascript"> 31 $(function(){ 32 //form表单的验证事件 33 $("#myForm").validate({ 34 //验证规则 需要对哪些元素做验证 35 rules:{ 36 userName:{ 37 required:true 38 }, 39 password:{ 40 required:true, 41 minlength:6, 42 maxlength:10 43 }, 44 repPassword:{ 45 required:true, 46 minlength:6, 47 maxlength:10, 48 equalTo:"#pwd" 49 }, 50 email:{ 51 required:true, 52 email:true 53 }, 54 phone:{ 55 required:true, 56 checkPhone:true //自己书写的手机验证正则 57 }, 58 context:{ 59 required:true 60 } 61 }, //rules end 62 //不符合验证规则的错误信息 63 messages:{ 64 userName:{ 65 required:"请输入用户名" 66 }, 67 password:{ 68 required:"请输入密码", 69 minlength:"密码长度不能少于6位", 70 maxlength:"密码长度不能大于10位" 71 }, 72 repPassword:{ 73 required:"请输入密码", 74 minlength:"密码长度不能少于6位", 75 maxlength:"密码长度不能大于10位", 76 equalTo:"两次密码输入不一致" 77 }, 78 email:{ 79 required:"请输入邮箱", 80 email:"邮箱格式不正确" 81 }, 82 phone:{ 83 required:"请输入手机号", 84 checkPhone:"电话号码格式不正确"//自己书写的手机验证正则 85 }, 86 context:{ 87 required:"您没有同意协议" 88 } 89 }, // messages end 90 //鼠标失去焦点立即验证 91 onfocusout:function(element){ 92 $(element).valid(); 93 } 94 }); // end validate 95 //增加了手机验证正则 96 jQuery.validator.addMethod("checkPhone",function(value,element){ 97 var tel = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ 98 return this.optional(element) || (tel.test(value)); 99 },"电话号码格式不正确") 100 }) 101 </script> 102 103 104 105 106 </body> 107 </html>
$(function () {
$("#name").validatebox({
required:true,
validType:['minlengthUser[6]','maxlengthUser[16]','checkUser'],
missingMessage:"请输入用户名"
})
$("#phone").validatebox({
required:true,
validType:['userTel'],
missingMessage:"请输入电话号码"
})
$("#userPwd").validatebox({
required:true,
validType:['minlength[6]','maxlength[16]'],
missingMessage:"请输入密码"
})
$("#userePwd").validatebox({
required:true,
validType:['minlength[6]','maxlength[16]','checkPass','equalTo["#userPwd"]'],
missingMessage:"请再次输入密码"
})
//自定义验证规则
$.extend($.fn.validatebox.defaults.rules,{
//验证用户名的格式
checkUser:{
validator:function (value, param) {
return /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/.test(value)
},
message:"6~18个字符，可使用字母、数字、下划线，需以字母开头"
},
//验证用户名的长度
minlengthUser:{
validator:function(value,param){
return value.length>=param[0];
},
message:"用户名长度至少为{0}位"
},
maxlengthUser:{
validator:function(value,param){
return value.length<param[0];
},
message:"用户名长度必须小于{0}位"
},
//验证密码最小长度
minlength:{
validator:function(value,param){
return value.length>=param[0];
},
message:"密码长度至少为{0}位"
},
//验证密码最大长度
maxlength:{
validator:function(value,param){
return value.length<param[0];
},
message:"密码长度必须小于{0}位"
},
//验证两次密码是否一致
equalTo: {
validator: function (value, param){
return $(param[0]).val() == value;
},
message: "两次输入密码不匹配"
},
//验证手机号
userTel: {
validator: function (value, param) {
return /^1[3|4|5|8|9][0-9]{9}$/.test(value);
},
message: "手机号码格式不正确"
}
})
//easyui表单提交的控制
$('#loginForm').form({
onSubmit:function(){
return $(this).form('validate');
},
success:function(){
$.messager.alert('Info', "恭喜您,注册成功!");
}
});
