jQuery-easyui和validate表单验证实例-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

jQuery-easyui和validate表单验证实例

简介: jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: 还需要引入三个外部js库 //这是中文简体语言包 validatebox表单验证实例 1 $(function () { 2 $("#name").

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 })
View Code

 

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>
View Code

 

 
$(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', "恭喜您,注册成功!");
}
});

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章