首页 > 代码库 > jquery验证
jquery验证
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="http://www.mamicode.com/statics/scripts/lib/html5shiv-3.7.2.min.js"></script> 13 <script src="http://www.mamicode.com/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:9121 },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:64135 },136 url:{137 url:true138 },139 birthday:{140 //date:true // 不支持IE6141 dateISO:true // 格式2011-01-01,2012/01/02142 },143 phoneNumber:{144 mobileNL:true145 },146 zipCode:{147 isZipCode:true148 }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>
jquery验证
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。