yunfeioliver 2017-11-04 19:08 原文
1、form表单验证
<!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> |
2、success
<!DOCTYPE html> |
|
<html> |
|
<head lang="en"> |
|
<meta charset="UTF-8"> |
|
<title></title> |
|
</head> |
|
<body> |
|
<h1>登录成功</h1> |
|
</body> |
|
</html> |
3、validate验证框架
<!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> |
谦卑若愚
好学若饥
不忘初心
推荐阅读