表单验证

最新推荐文章于 2022-06-21 15:54:38 发布

趙小二啊

最新推荐文章于 2022-06-21 15:54:38 发布

阅读量238

点赞数

文章标签：表单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手工实现表单验证</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">

</script>

</head>
<body>
<fieldset>
<legend>用户注册页面</legend>
<form id="myform" name="myform" οnsubmit="return formValidator()">
<table>
<tr>
<td>用户名:</td>

<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" id="repwd"></td>

<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td>email地址:</td>
<td><input type="text" id="email"></td>

<td><div id="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="rigist" value="注册"></td>
<td></td>
</tr>
</table>
</form>
</fieldset>
<script>

function userValidator(){
var reg=/^[a-zA-Z0-9]{6,12}$/;
var $myval=$("#user").val();
//不能为空
if($myval==""||$myval==null){
$("#userTip").text("用户名不能为空.").css({
"color":"red",
"font-weight":"bold"
});
return false;
}
//6-12位英文+数字
else if(!reg.test($myval)){
$("#userTip").text("用户名输入错误.").css({
"color":"red",
"font-weight":"bold"
});
return false;
}
//输入正确
else{
$("#userTip").text("用户名输入正确.").css({
"color":"green",
"font-weight":"bold"
});
return true;
}
}

function pwdValidator(){
var reg=/^[a-zA-Z]{6,8}$/;
var $myval=$("#pwd").val();
if($myval==""||$myval==null){
$("#pwdTip").text("密码不能为空.").css({
"color":"red",
"font-weight":"bold"
});
return false;
}else if(!reg.test($myval)){
$("#pwdTip").text("密码输入错误.").css({
"color":"red",
"font-weight":"bold"
});
return false;
}else {
$("#pwdTip").text("密码输入正确.").css({
"color":"green",
"font-weight":"bold"
});
return true;
}
}

function repwdValidator(){
var reg=/^[a-zA-Z]{6,8}$/;
var $myval=$("#repwd").val();
var $pwd=$("#pwd").val();
if($myval==""||$myval==null){
$("#repwdTip").text("密码不能为空.").css({
"color":"red",
"font-weight":"bold"
});
return false;
}else if(!reg.test($myval)){
$("#repwdTip").text("密码输入错误.").css({
"color":"red",
"font-weight":"bold"
});
return false;
}
//两次密码输入一致
else if($myval!=$pwd){
$("#repwdTip").text("两次密码输入不一致.").css({
"color":"red",
"font-weight":"bold"
});
return false;
}
else {
$("#repwdTip").text("密码输入正确.").css({
"color":"green",
"font-weight":"bold"
});
return true;
}
}

function emailValidator(){
var $myval=$("#email").val();
if($myval==""||$myval==null){
$("#emailTip").text("email输入错误.").css({
"color":"red",
"font-weight":"bold"
});
return false;
}
else {
$("#emailTip").text("email输入正确.").css({
"color":"green",
"font-weight":"bold"
});
return true;
}
}

//用户名验证
$("#user").focus(function(){
$("#userTip").text("请输入英文或数字，长度在6至12之间。").css({
"color":"black",
"font-weight":"normal"
});
}).blur(userValidator);
//密码验证
$("#pwd").focus(function(){
$("#userTip").text("请输入英文或数字，长度在6至12之间。").css({
"color":"black",
"font-weight":"normal"
});
}).blur(pwdValidator);
//确认密码
$("#repwd").focus(function(){
$("#repwdTip").text("请输入英文或数字，长度在6至12之间。").css({
"color":"black",
"font-weight":"normal"
});
}).blur(repwdValidator);
//邮箱验证
$("#email").focus(function(){
$("#emailTip").text("email不能为空。").css({
"color":"black",
"font-weight":"normal"
});
}).blur(emailValidator);

//提交表单前，验证所有元素验证通过
function formValidator(){
if(userValidator()&&pwdValidator()&&repwdValidator()&&emailValidator()){
return true;
}else{
return false;
}
}
</script>
</body>
</html>