Jquery对注册表单校验
* form表单
<form id="registerForm">
<div id="errorMsg" style="color: red;text-align: center"></div>
<!--提交处理请求的标识符-->
<input type="hidden" name="action" value="register">
<table style="margin-top: 25px;">
<tr>
<td class="td_left">
<label for="username">用户名</label>
</td>
<td class="td_right">
<input type="text" id="username" name="username" placeholder="请输入账号">
</td>
</tr>
<tr>
<td class="td_left">
<label for="password">密码</label>
</td>
<td class="td_right">
<input type="text" id="password" name="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td class="td_left">
<label for="email">Email</label>
</td>
<td class="td_right">
<input type="text" id="email" name="email" placeholder="请输入Email">
</td>
</tr>
<tr>
<td class="td_left">
<label for="name">姓名</label>
</td>
<td class="td_right">
<input type="text" id="name" name="name" placeholder="请输入真实姓名">
</td>
</tr>
<tr>
<td class="td_left">
<label for="telephone">手机号</label>
</td>
<td class="td_right">
<input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
</td>
</tr>
<tr>
<td class="td_left">
<label for="sex">性别</label>
</td>
<td class="td_right gender">
<input type="radio" id="sex" name="sex" value="男" checked> 男
<input type="radio" name="sex" value="女"> 女
</td>
</tr>
<tr>
<td class="td_left">
<label for="birthday">出生日期</label>
</td>
<td class="td_right">
<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
</td>
</tr>
<tr>
<td class="td_left">
<label for="check">验证码</label>
</td>
<td class="td_right check">
<input type="text" id="check" name="check" class="check">
<img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
<script type="text/javascript">
//图片点击事件
function changeCheckCode(img) {
img.src="checkCode?"+new Date().getTime();
}
</script>
</td>
</tr>
<tr>
<td class="td_left">
</td>
<td class="td_right check">
<input type="submit" class="submit" value="注册">
<span id="msg" style="color: red;"></span>
</td>
</tr>
</table>
</form>
* jquery的校验代码
<script>
//校验username 8-20位
function checkUsername() {
var username = $("#username").val();
//定义正则
var reg = /^\w{8,20}$/;
//校验
var flag = reg.test(username);
if (flag){
//验证成功
$("#username").css("border","");
}else {
//验证失败
$("#username").css("border","1px solid red");
}
return flag;
}
//校验password 6-20位
function checkPassword() {
var password = $("#password").val();
//定义正则
var reg = /^\w{6,20}$/;
//校验
var flag = reg.test(password);
if (flag){
//验证成功
$("#password").css("border","");
}else {
//验证失败
$("#password").css("border","1px solid red");
}
return flag;
}
//校验email
function checkEmail(){
var email = $("#email").val();
//定义正则校验邮箱
var reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
var flag = reg.test(email);
if (flag){
//验证成功
$("#email").css("border","");
}else {
//验证失败
$("#email").css("border","1px solid red");
}
return flag;
}
//校验姓名
function checkName(){
var name = $("#name").val();
//校验姓名,包含中英文
var reg = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{4,10}$/
var flag = reg.test(name);
if (flag){
//验证成功
$("#name").css("border","");
}else {
//验证失败
$("#name").css("border","1px solid red");
}
return flag;
}
//校验手机号
function checkTelephone(){
var phone = $("#telephone").val();
//定义正则 校验phone
var reg = /^1[34578]\d{9}$/;
var flag = reg.test(phone);
if (flag){
//验证成功
$("#telephone").css("border","");
}else {
//验证失败
$("#telephone").css("border","1px solid red");
}
return flag;
}
//校验出生日期 非空
function checkBirth(){
var birth = $("#birthday").val();
if (birth.length == 0 || birth == ""){
//空
var flag = false;
$("#birthday").css("border","1px solid red");
return flag;
}else {
//非空
$("#birthday").css("border","");
var flag = true;
return flag;
}
}
//校验验证码 非空
function checkCode(){
var code = $("#check").val();
if (code.length == 0 || code == ""){
//空
var flag = false;
$("#check").css("border","1px solid red");
return flag;
}else {
//非空
$("#check").css("border","");
var flag = true;
return flag;
}
}
//入口函数
$(function () {
//表单提交的时候校验
$("#registerForm").submit(function () {
if (checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() &&
checkBirth() && checkCode()) {
//异步提交ajax请求
$.post("user/register",$(this).serialize(),function (data) {
if (data.flag){
//成功
location.href = "http://localhost/travel/register_ok.html";
}else {
//失败
$("#errorMsg").html(data.errorMsg)
}
});
}
return false; //不让表单提交,只是通过异步来传递到servlet
});
//失去焦点的时候校验
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);
$("#name").blur(checkName);
$("#telephone").blur(checkTelephone);
$("#birthday").blur(checkBirth);
$("#check").blur(checkCode);
})
</script>