标签：c51 erro post asc type ror messages use jquery
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>验证</title> | |
| </head> | |
| <body> | |
| <form id="myForm" action="success.html" method="post"> | |
| 用户名:<input name="userName" placeholder="请输入用户名"> | |
| <button type="button" onclick="doSubmit()">登录</button> | |
| </form> | |
| <!-- | |
| 可以跳过验证： | |
| F12 | |
| 之后把type="button" 改成type="submit" | |
| --> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| function doSubmit(){ | |
| var userName=$("[name=‘userName‘]").val(); | |
| if(userName==""){ | |
| alert("用户名不能为空"); | |
| return; | |
| } | |
| //表单提交 | |
| $("#myForm").submit(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| </head> | |
| <body> | |
| <h1>登录成功</h1> | |
| </body> | |
| </html> |
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>验证框架的使用</title> | |
| <style type="text/css"> | |
| .error{ | |
| color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form action="success.html" method="post" id="myForm"> | |
| 用户名：<input name="userName"> <br/> | |
| 密码：<input name="password" type="password" id="pwd"> <br/> | |
| 确认密码：<input name="repPassword"type="password" > <br/> | |
| 邮箱：<input name="email"> <br/> | |
| 手机号：<input name="phone"> <br/> | |
| 性别：<input name="sex" type="radio" value="男" checked>男 | |
| <input name="sex" type="radio" value="女">女<br/> | |
| 是否同意协议<input type="checkbox" name="context"><br/> | |
| <button type="submit">注册</button> | |
| </form> | |
| <!--引入需要的js库--> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript" src="../js/jquery.validate.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| //form表单的验证事件 | |
| $("#myForm").validate({ | |
| //验证规则 需要对哪些元素做验证 | |
| rules:{ | |
| userName:{ | |
| required:true | |
| }, | |
| password:{ | |
| required:true, | |
| minlength:6, | |
| maxlength:10 | |
| }, | |
| repPassword:{ | |
| required:true, | |
| minlength:6, | |
| maxlength:10, | |
| equalTo:"#pwd" | |
| }, | |
| email:{ | |
| required:true, | |
| email:true | |
| }, | |
| phone:{ | |
| required:true, | |
| checkPhone:true //自己书写的手机验证正则 | |
| }, | |
| context:{ | |
| required:true | |
| } | |
| }, //rules end | |
| //不符合验证规则的错误信息 | |
| messages:{ | |
| userName:{ | |
| required:"请输入用户名" | |
| }, | |
| password:{ | |
| required:"请输入密码", | |
| minlength:"密码长度不能少于6位", | |
| maxlength:"密码长度不能大于10位" | |
| }, | |
| repPassword:{ | |
| required:"请输入密码", | |
| minlength:"密码长度不能少于6位", | |
| maxlength:"密码长度不能大于10位", | |
| equalTo:"两次密码输入不一致" | |
| }, | |
| email:{ | |
| required:"请输入邮箱", | |
| email:"邮箱格式不正确" | |
| }, | |
| phone:{ | |
| required:"请输入手机号", | |
| checkPhone:"电话号码格式不正确"//自己书写的手机验证正则 | |
| }, | |
| context:{ | |
| required:"您没有同意协议" | |
| } | |
| }, // messages end | |
| //鼠标失去焦点立即验证 | |
| onfocusout:function(element){ | |
| $(element).valid(); | |
| } | |
| }); // end validate | |
| //增加了手机验证正则 | |
| jQuery.validator.addMethod("checkPhone",function(value,element){ | |
| var tel = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ | |
| return this.optional(element) || (tel.test(value)); | |
| },"电话号码格式不正确") | |
| }) | |
| </script> | |
| </body> | |
| </html> |
标签：c51 erro post asc type ror messages use jquery
原文地址：http://www.cnblogs.com/yunfeioliver/p/7784177.html
