jquery表单验证

.myform {

width: 600px;

margin: 50px auto 0;

}

.p {

border: 1px #cecece solid;

width: 480px;

margin: 0 auto 20px;

}

.txt {

height: 36px;

width: 80px;

background-color: white;

box-sizing: content-box;

vertical-align: text-bottom;

border: none;

}

.info {

box-sizing: content-box;

border: none;

height: 36px;

font-size: 12px;

vertical-align: text-bottom;

width: 200px;

margin-left: -10px;

padding-left: 10px;

}

.code {

display: inline-block;

float: right;

height: 39px;

width: 80px;

background-color: black;

color: white;

text-align: center;

line-height: 39px;

}

.login_box {

border: none;

width: 360px;

margin: 0 auto;

}

.login {

width: 360px;

height: 36px;

background-color: #ff3829;

border: none;

color: white;

}

.read{

width: 400px;

margin: 0 auto 20px;

}

.read span:nth-of-type(1){

font-size: 14px;

}

.read span:nth-of-type(2){

font-size: 11px;

color: blue;

}

.error{

color:red;

}

$(function () {

//表单验证

$("#myform").validate({

rules:{

username: {

required: true

},

password: {

required: true,

rangelength:[8,20]

},

repress: {

required: true,

rangelength:[8,20],

equalTo: "#password"

},

phone: {

required: true,

phone: true

},

code: {

required: true,

},

checkbox: 'required'

},

messages:{

username: {

required: "请输入用户名"

},

password: {

required: "请输入密码",

rangelength:"密码长度必须是8到20位"

},

repress: {

required: "请再次输入密码",

rangelength:"密码长度必须是8到20位",

equalTo: "两次输入的密码不一致"

},

phone: {

required: '请填写手机号码'

},

code: {

required: "请输入验证码",

},

checkbox:{

required: "请同意该协议"

}

}

});

/*

*179000501吴川

*

* 个人收获：通过使用该插件，很方便去验证表单的合法性，在以后的开发中不用在后台去做一些判断，

* 循环的语句了，这样既可以减少代码的使用量，又为程序员提供了很多的时间去做更多的事情，而且该

* 插件的样式和某些功能，更是令程序员眼前一亮，更为客户提供了更好的使用体验感。

*

*

* */

// 手机号码验证

jQuery.validator.addMethod("phone", function(value, element) {

let length = value.length;

let mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;

return this.optional(element) || (length == 11 && mobile.test(value));

}, "请填写正确的手机号码");

})

请完善你的表单

HCf6

阅读并同意

《京东用户注册协议》 《隐私政策》

一键复制

编辑

Web IDE

原始数据

按行查看

历史