做为一个正在向后台程序努力的少年,想必你一定知道表单的重要性。因为表单是我们获取用户数据最重要的载体,这样更好的实现了与用户真正的交互。在实际应用中,如:用户注册、登录及商城系统中用户收货地址、联系方式。。。
当然,在与用户的这种交互过程中,我们无法预料到所有可能发生的情况,因此我们只能做一些我们能做的,以保证给用户提供一个比较好的交互体验以及保证我们数据的安全。。。
表单的验证在实际开发中,分为:前端验证和后台验证。前端验证的目的,更多的是提示用户按照我们给定的规则填写相应的信息,只有这样才能为用户节省时间。也就是说,如果不进行前端数据验证,那么用户只有每次填写完所有需要的数据,然后点击提交按钮。。。这时数据发送到服务器,在服务器端时行验证,如果服务器端中验证的某一项信息不符合规定,那么用户在经过漫长等之后,又得重新填写一遍数据。。。即浪费时间又影响用户体验。。。所以前端与后台都进行验证才是王道。。。
一、引入JS文件
/* 因为该插件是基于jquery开发的,所以你需要先引入jquery库 */
<script src="js/jquery-1.11.1.min.js"></script>
/* 引入jquery.validation.js插件,这里是压缩版 */
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js">
</script>
二、HTML结构
<form action="action.php" id="signupForm" method="post">
<p class="inputW">
<strong>用户名:</strong>
<input id="username" name="username" type="text">
</p>
<p class="inputW">
<strong>邮箱:</strong>
<input name="email" type="text">
</p>
<p class="inputW">
<strong>密码:</strong>
<input id="pwd" name="pwd" type="password">
</p>
<p class="inputW">
<strong>确认密码:</strong>
<input name="c_pwd" type="password">
</p>
<input class="inputBnt" type="submit" value="注册">
</form>
三、核心样式
由于时间和篇幅的关系,我只将核心代码贴出来。
<style>
....
/* 当验证错误时,表单元素的样式 */
.inputW input.error{border-color: #e9322d;box-shadow: 0 0 6px #f8b9b7;}
/* label是插件默认造成的错误包含标签,你也可以自定义 */
label{display: inline-block;*display: inline;*zoom: 1;padding-left: 20px;}
/* 验证错误时的样式 */
label.error{background: transparent url("err_small.png") 0 0 no-repeat;color: red;}
/* 验证正确时的样式 */
label.success{background: transparent url("suc_small.png") 0 0 no-repeat;}
....
</style>
四、核心JS代码及注释
<script>
$("#signupForm").validate({
onkeyup: false,
rules: { // ==== 验证规则 ====
username : { // 用户名验证(name="username")
required : true, // 必填项
minlength : 5, // 最少5个字符
maxlength : 12, // 最多12个字符
remote: { // 数据异步验证
url: "chk_user.php", // 服务端验证程序
type: "post", // 提交方式
dataType: "json", // 数据格式
data: { // 要传递的数据
username: function() { return $("#username").val(); }
}
}
},
email: { // 邮箱验证(name="email")
required : true, // 必填项
email : true // 以邮箱规则进行验证
},
pwd : { // 密码验证(name="pwd")
required : true, //
minlength : 6 // 最少字符为6
},
c_pwd : { // 确认密码(name="c_pwd")
required : true, //
equalTo : "#pwd" // 输入值必须与 #pwd 值相同
},
},
messages:{ // ==== 提示信息 ====
username:{
required : "亲,您必须填写用户名",
minlength: "最少为5个字符",
maxlength: "最多为12个字符",
remote : "该用户名已存在,请<a href=''>登录</a>!"
},
email: {
required : "请填写邮箱地址"
},
pwd : {
minlength: "最少大于6个字符"
},
c_pwd : {
equalTo : "确认密码有误"
}
},
errorPlacement: function(error, element) { // 错误信息显示位置
if ( element.is(":radio") ){
error.appendTo ( element.parent() )
}else if ( element.is(":checkbox") ){
error.appendTo ( element.parent() );
}else if ( element.is("input[name=verify]") ){
error.appendTo ( element.parent() );
}else{
error.insertAfter(element);
}
},
success : function(label){ // 验证信息成功后的操作
label.html(" ").addClass("success");
}
});
</script>