jquery验证
浏览数：50 /
时间：2015年06月09日
1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <title>FORM表单验证</title> 5 <meta charset="UTF-8" /> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <link rel="stylesheet" href="../../statics/themes/default/lib/jquery-ui/jquery-ui-1.11.1.css" media="all" /> 9 <link rel="stylesheet" href="../../statics/themes/default/lib/bootstrap/css/bootstrap-3.2.0.min.css" media="all" /> 10 <link rel="stylesheet" href="../../statics/themes/default/melon/melon-theme-1.1.0.css" media="all" /> 11 <!--[if lt IE 9]> 12 <script src="../../statics/scripts/lib/html5shiv-3.7.2.min.js"></script> 13 <script src="../../statics/scripts/lib/respond-1.4.2.min.js"></script> 14 <![endif]--> 15 <style type="text/css"> 16 17 </style> 18 </head> 19 <body> 20 <div class="container"> 21 22 <div class="row"> 23 24 <form class="form-horizontal" id="signupForm" method="get" action=""> 25 <div class="form-group"> 26 <label for="code" class="col-xs-3">编码</label> 27 <div class="col-xs-9 form-field"> 28 <input id="code" name="code" class="form-control" placeholder="编码"/> 29 <label class="form-hint">编码由3位类型字母+2位数字或字母+4位数字组成</label> 30 </div> 31 </div> 32 33 <div class="form-group"> 34 <label for="name" class="col-xs-3">用户名</label> 35 <div class="col-xs-9 form-field"> 36 <input id="name" name="name" class="form-control" placeholder="用户名"/> 37 <label class="form-hint">帐号由6到20位字符组成，只能包含数字、大小字母</label> 38 </div> 39 </div> 40 41 <div class="form-group"> 42 <label for="password" class="col-xs-3">密码</label> 43 <div class="col-xs-9 form-field"> 44 <input id="password" name="password" class="form-control" placeholder="密码"/> 45 <label class="form-hint">密码由6到20位字符组成</label> 46 </div> 47 </div> 48 49 <div class="form-group"> 50 <label for="confirmPassword" class="col-xs-3">确认密码</label> 51 <div class="col-xs-9 form-field"> 52 <input id="confirmPassword" name="confirmPassword" class="form-control" placeholder="密码"/> 53 </div> 54 </div> 55 56 <div class="form-group"> 57 <label for="email" class="col-xs-3">电子邮箱</label> 58 <div class="col-xs-9 form-field"> 59 <input id="email" name="email" class="form-control" placeholder="电子邮箱"/> 60 </div> 61 </div> 62 63 <div class="form-group"> 64 <label for="url" class="col-xs-3">个人主页</label> 65 <div class="col-xs-9 form-field"> 66 <input id="url" name="url" class="form-control" placeholder="个人主页"/> 67 </div> 68 </div> 69 70 <div class="form-group"> 71 <label for="birthday" class="col-xs-3">出生日期</label> 72 <div class="col-xs-9 form-field"> 73 <input id="birthday" name="birthday" class="form-control" placeholder="出生日期"/> 74 <label class="form-hint">日期格式：XXXX-XX-XX或XXXX/XX/XX</label> 75 </div> 76 </div> 77 78 <div class="form-group"> 79 <label for="phoneNumber" class="col-xs-3">手机号码</label> 80 <div class="col-xs-9 form-field"> 81 <input id="phoneNumber" name="phoneNumber" class="form-control" placeholder="手机号码"/> 82 </div> 83 </div> 84 85 <div class="form-group"> 86 <label for="" class="col-xs-3">邮政编码</label> 87 <div class="col-xs-9 form-field"> 88 <input id="zipCode" name="zipCode" class="form-control" placeholder="邮政编码"/> 89 </div> 90 </div> 91 92 <div class="form-group"> 93 <div class="col-xs-9 col-xs-offset-3 form-buttons"> 94 <button class="btn btn-primary"> 95 保存 96 </button> 97 <button class="btn btn-default"> 98 取消 99 </button> 100 </div> 101 </div> 102 </form> 103 </div> 104 </div> 105 <script src="../../statics/scripts/lib/jquery-1.11.1.min.js"></script> 106 <script src="../../statics/scripts/lib/bootstrap-3.2.0.min.js"></script> 107 <script src="../../statics/scripts/lib/jquery-ui-1.11.1.min.js"></script> 108 <script src="../../statics/scripts/widgets/jquery.validate-1.13.0.min.js"></script> 109 <script src="../../statics/scripts/widgets/jquery.validate.additional-1.13.0.js"></script> 110 <script src="../../statics/scripts/widgets/jquery.validate.messages_zh.js"></script> 111 <script src="../../statics/scripts/widgets/jquery.inputmask.bundle-3.1.8.min.js"></script> 112 <script type="text/javascript"> 113 114 $(document).ready(function() { 115 116 $("#signupForm").validate({ 117 rules:{ 118 code:{ 119 required:true, 120 maxlength:9 121 }, 122 name:{ 123 required:true, 124 }, 125 password:{ 126 required:true, 127 }, 128 confirmPassword:{ 129 required:true, 130 equalTo:‘#password‘ 131 }, 132 email:{ 133 email:true, 134 maxlength:64 135 }, 136 url:{ 137 url:true 138 }, 139 birthday:{ 140 //date:true // 不支持IE6 141 dateISO:true // 格式2011-01-01,2012/01/02 142 }, 143 phoneNumber:{ 144 mobileNL:true 145 }, 146 zipCode:{ 147 isZipCode:true 148 } 149 150 }, 151 messages:{ 152 code:{ 153 required:"请输入编码", 154 maxlength:$.validator.format("编码不能大于{0}位") 155 }, 156 name:{ 157 required:"请输入用户名" 158 }, 159 password:{ 160 required:"请输入密码" 161 }, 162 confirmPassword:{ 163 required:"请输入确认密码", 164 equalTo:"两次输入的密码不一致，请重新输入" 165 }, 166 email:{ 167 email:"请输入合法的email", 168 maxlength:$.validator.format("email的长度不得超过64位") 169 }, 170 url:{ 171 url:"请输入合法的url", 172 }, 173 birthday:{ 174 date:"请输入正确格式的日期" 175 } 176 } 177 178 }); 179 //$("#name").rules("add", { required: true, messages: { required: "非空"} }); 180 $.validator.addMethod("isZipCode", function(value, element) { 181 var tel = /^[0-9]{6}$/; 182 return this.optional(element) || (tel.test(value)); 183 }, "请正确填写您的邮政编码"); 184 185 }); 186 </script> 187 </body> 188 </html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
