前端验证有各种插件,也有各种实现方式,可谓八仙过海,各显神通,几乎看到的每个人的验证方式都有所区别,本例仅作示例,做到html、css、js的解耦合,又兼顾移开光标就显示错误信息的用户体验。
注:本例为form形式的表单提交,为更方便观察传递的input值,使用了get方式提交,实际应用中为了安全,最好用post提交的方式。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>注册表单</title>
<style>
table{
border:1px solid #6699cc;
width:600px;
margin:0 auto;
border-collapse: collapse;
font-family:'微软雅黑';
}
th,td{
border:1px solid #6699cc;
padding:10px;
}
th{
background-color: #090;
}
td{
background-color: #0f9;
}
#repswSpan{
margin-left:150px;
}
.error-info{
color:#f00;
display: none;
}
.focus{
border:2px solid #6699cc;
}
.normal{
border:1px solid #999;
}
.errror{
border:2px solid #f00;
}
.submit-btn{
display: inline-block;
color:#fff;
background-color: #6699cc;
width:100px;
height: 25px;
line-height: 25px;
font-size:15px;
font-weight: 600;
text-align: center;
border:none;
}
</style>
</head>
<body>
<form action="http://www.baidu.com" method="get" id="registerForm">
<table>
<tr>
<th>注册表单</th>
</tr>
<tr>
<td>
<div>用户名</div>
<div><input type="text" name="user"/></div>
<div class="error-info J_user_error_info">用户名错误,请按要求输入</div>
<div>用户名必须是3-5位,由字母(a-z),数字(0-9),下划线(_)组成</div>
</td>
</tr>
<tr>
<td>
<div><span>密码</span><span id="repswSpan">确认密码</span> </div>
<div>
<input type="password" name="psw"/>
<input type="password" name="repsw"/>
</div>
<div class="error-info J_error_psw_info">密码格式错误,请按要求输入</div>
<div class="error-info J_error_repsw_info">两次密码输入不一致</div>
<div>密码必须是6-12位,由字母(a-z),数字(0-9)组成</div>
</td>
</tr>
<tr>
<td>
<div>邮件地址</div>
<div><input type="text" name="mail"/></div>
<div class="error-info J_error_mail_info">邮箱地址错误,请按要求填写</div>
</td>
</tr>
<tr>
<th><input type="submit" class="submit-btn" value="提交数据"/></th>
</tr>
</table>
</form>
<script type="text/javascript" src="../jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
var $inputEle=$("input[name]");
//页面加载时的input正常效果
$inputEle.addClass('normal');
//input元素获取焦点效果
function inputColor(input){
input.on('focus',function(e){
$(this).addClass('focus');
})
}
//将含有name属性的input元素添加获取焦点效果
inputColor($inputEle);
//校验各输入框的公有方法
function checkVal(flag,$input,$errorInfo){
if(!flag){
$input.addClass('error');
$errorInfo.show();
return false;
}
$input.addClass('normal');
$errorInfo.hide();
return true;
}
var regUser=/^\w{3,5}$/,
regPsw=/^[a-z0-9]{6,12}$/i,
regMail=/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
var $userErrorInfo=$('.J_user_error_info'),
$pswErrorInfo=$('.J_error_psw_info'),
$repswErrorInfo=$('.J_error_repsw_info'),
$mailErrorInfo=$('.J_error_mail_info');
var $user=$("input[name='user']"),
$psw=$("input[name='psw']"),
$repsw=$("input[name='repsw']"),
$mail=$("input[name='mail']"),
$submitBtn=$("input[type='submit']");
//校验用户名
$user.on('blur',function(e){
var userFlag=regUser.test($(this).val());
return checkVal(userFlag,$(this),$userErrorInfo);
});
//校验密码
$psw.on('blur',function(e){
var pswFlag=regPsw.test($(this).val());
checkVal(pswFlag,$(this),$pswErrorInfo);
});
//校验确认密码
$repsw.on('blur',function(e){
var repswVal=$(this).val(),
pswVal=$psw.val();
var repswFlag=(repswVal===pswVal);
checkVal(repswFlag,$(this),$repswErrorInfo);
});
//校验邮箱
$mail.on('blur',function(e){
var mailFlag=regMail.test($(this).val());
checkVal(mailFlag,$(this),$mailErrorInfo);
});
//点击提交按钮
$submitBtn.on('click',function(e){
var userFlag=regUser.test($user.val()),
pswFlag=regPsw.test($psw.val()),
repswFlag=($repsw.val()===$psw.val()),
mailFlag=regMail.test($mail.val());
var checkUserResult=checkVal(userFlag,$user,$userErrorInfo),
checkPswResult=checkVal(pswFlag,$psw,$pswErrorInfo),
checkRepswResult=checkVal(repswFlag,$repsw,$repswErrorInfo),
checkMailResult=checkVal(mailFlag,$mail,$mailErrorInfo);
if(checkUserResult && checkPswResult && checkRepswResult && checkMailResult){
$('#registerForm').submit();
}else{
e.preventDefault();
}
});
});
</script>
</body>
</html>