jquery表单校验
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册</title>
<link href="../../../Style/main.css" rel="stylesheet" type="text/css" />
<link href="../../../Style/register.css" rel="stylesheet" type="text/css" />
<link href="../../../Style/fee.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="../../Scripts/messages_cn.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.js"></script>
<script type="text/javascript">
$(function() {
VildationForm();
});
//表单验证
function VildationForm() {
$("#regForm").validate(
{
rules: {
userName: { required: true, digits: true },
userPwd: { required: true, minlength: 6, maxlength: 20 },
userPwdAgin: { required: true, minlength: 6, maxlength: 20 },
userSex: { required: true },
passwordSecond: { required: true },
qq: { required: true, digits: true },
userEmail: { required: true, email: true }
},
messages: {
userName: { required: "必填", digits: "只能输入数字" },
userPwd: { required: "必填", minlength: "密码最少六位", maxlength: "密码最多20位" },
userPwdAgin: { required: "必填", minlength: "密码最少六位", maxlength: "密码最多20位" },
userSex: { required: "必填" },
passwordSecond: { required: "必填" },
qq: { required: "必填", digits: "只能输入数字" },
userEmail: { required: "必填", email: "输入格式有误" }
}
});
}
//验证账户
function check() {
var uNum = ElementById("userName").value;
var reg = /^0{0,1}(13[0-9]|15[0-9]|18[0-9])[0-9]{8}$/;
if (!st(uNum)) {
alert("手机号码格式有误，请重新输入");
return;
} else {
$.ajax({
type: "GET",
url: "/Home/CheckUser",
data: { username: uNum },
success: function(mes) {
if (mes == "false") {
alert("该账户已存在，请重新选择一个");
return;
}
}
});
}
}
//添加用户
function AddUser() {
if ($("#regForm").valid()) {
$.ajax({
type: "POST",
url: "/Home/DoReg",
data: { userNum: $("#userName").val(),
userPwd: $("#userPwd").val(),
userSex: $("input[@type=radio][@name=userSex][@checked]").val(),
userscdPwd: $("#userPwdAgin").val(),
userQQ: $("#qq").val(),
userEmail: $("#userEmail").val()
},
success: function(mes) {
if (mes == "true")
alert("注册成功");
else
alert("注册失败");
}
});
}
}
</script>
</head>
<body>
<div class="container">
<div class="reg_01">
<img src="../../Images/register_bg_03.gif" /></div>
<div class="reg_02">
<div id="reg_0201">
<div id="reg_icon1">
<img src="../../Images/reg3_14.gif" width="39" height="42" /></div>
<div id="reg_0202">
欢迎注册易灵通</div>
<div id="reg_icon2">
<img src="../../Images/reg_08.gif" /></div>
<div id="reg_0204">
填写注册信息</div>
<div id="reg_icon3">
<img src="../../Images/reg_10.gif" /></div>
<div id="reg_0203">
完成注册</div>
</div>
<div id="reg_0205">
<form action="/Home/DoReg" method="post" id="regForm">
<div id="Div1">
<div id="reg_0205con" >
<label>
<span class="black14">用户名： </span>
<input name="userName" type="text" id="userName" onblur="check()" />
<div id="nameDiv" >
<em></em>
</div>
 
</label>
<span class="red12">用户名必须为您的手机号码</span>
</div>
<div id="reg_0205con" >
<label>
<span cl
ass="black14">密  ；码：</span>
<input name="userPwd" type="password" id="userPwd" /><em></em>
</label>
<span class="red12">必须由数字或字母组成，长度不少于6</span>
</div>
<div id="reg_0205con" >
<label>
<span class="black14">  ；确认密码：</span>
<input name="userPwdAgin" type="password" id="userPwdAgin" />
</label>
qq用户名
</div>
<div id="reg_0205con">
<label>
<span class="black14">      性别：</span></label>
<label class="black14">
<input type="radio" name="userSex" value="0" id="men" checked />男<input type="radio"
name="userSex" id="women" value="1" />女
</label>
</div>
<div id="reg_0205con">
<label>
<span class="black14">  ；二级密码：</span></label>
<label>
<input name="passwordSecond" type="password" id="passwordSecond" />
</label>
</div>
<div id="reg_0205con">
<label>
<span class="black14">    QQ号码：</span></label>
<label>
<input name="qq" type="text" id="qq" />
</label>
</div>
<div id="reg_0205con">
<label>
<span class="black14">  ；保密邮箱：</span></label>
<label>
<input name="userEmail" type="text" id="userEmail" />
</label>
</div>
<div id="reg_0205con" >
 <input type="button" id="but" value="提交" onclick="AddUser()" />          
<input type="reset" value="重置" /></div>
</div>
</form>
</div>
</div>
</div>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。