html表单验证的用途,表单验证的完整应用案例探讨

表单问题，是个纠结的问题，我觉得这个是程序开发人员要去处理的东西，但是有时候程序又要前端去处理，那要看你的后台搭档怎么样了？苦逼的前端哇，不过还是自己了解一点还是比较好，你搞我也可以搞，你不搞我还可以搞，哈哈 。如果对你有用欢迎留言，共同探讨，共同进步，废话不说，贴代码(为了童鞋们方便，本代码复制即可用，无需分块拼凑)：

表单验证的完整应用

.leftside{width:100px; text-align:right;float:left;}

label.error{color:#ea5200; margin-left:4px; padding:0px 20px; background:url(http://jt.875.cn/icon/unchecked.gif) no-repeat 2px 0 }

label.right{margin-left:4px; padding-left:20px; background:url(http://jt.875.cn/icon/checked.gif) no-repeat 2px 0}

$(function(){

$( "#regForm" ).validate({

rules: {

// 注册用户名

username: {

required: true,

minlength: 5,

maxlength: 12

},

// email

email: {

required: true,

email: true

},

// 密码

password: {

required: true,

minlength: 6,

maxlength: 18

},

// 确认密码

confirm_password: {

equalTo:"#password"

},

// 检验验证码

captcha: {

required: true,

remote: "checkCaptcha.php"

}

},

messages: {

// 注册用户名

username: {

required: "此项不能为空",

minlength: "不能少于5个字符",

maxlength: "不能多于12个字符"

},

// email

email: {

required: "此项不能为空",

email: "email格式不正确"

},

// 密码

password: {

required: "此项不能为空",

minlength: "不能少于6个字符",

maxlength: "不能多于18个字符"

},

// 确认密码

confirm_password: "两次输入密码不一致",

// 检验验证码

captcha: {

required: "请输入验证码",

remote: "验证码输入错误"

}

}

});

});

姓名：

密码：

确认密码：

EMAIL：

效果图如下