Jquery 表单验证类介绍与实例_Javascript教程-查字典教程网
Jquery 表单验证类介绍与实例
Jquery 表单验证类介绍与实例
发布时间:2016-12-30 来源:查字典编辑
摘要:[html]复制代码代码如下:数值:浮点型:英文:大写英文:小写英文:邮件格式:是否包含中文:URL:电话号码:IP地址:金额:数值或者英文...

[html]

复制代码 代码如下:

<form action="" method="post" id="formValidate">

数值:<input name="" type="text" validate="number" /><span></span><br/>

浮点型:<input name="" type="text" validate="decimal" /><span></span><br/>

英文:<input name="" type="text" validate="english" /><span></span><br/>

大写英文:<input name="" type="text" validate="upper_english" /><span></span><br/>

小写英文:<input name="" type="text" validate="lower_english" /><span></span><br/>

邮件格式:<input name="" type="text" validate="email" /><span></span><br/>

是否包含中文:<input name="" type="text" validate="chinese" /><span></span><br/>

URL:<input name="" type="text" validate="url" /><span></span><br/>

电话号码:<input name="" type="text" validate="phone" /><span></span><br/>

IP地址:<input name="" type="text" validate="ip" /><span></span><br/>

金额:<input name="" type="text" validate="money" /><span></span><br/>

数值或者英文或者_:<input name="" type="text" validate="number_letter" /><span></span><br/>

邮政编码:<input name="" type="text" validate="zip_code" /><span></span><br/>

可用账号:<input name="" type="text" validate="account" /><span></span><br/>

QQ:<input name="" type="text" validate="qq" /><span></span><br/>

身份证:<input name="" type="text" validate="card" /><span></span><br/>

数值 允许为空:<input name="" type="text" validate="number" empty='yes' /><span></span><br/>

数值 长度 1-3:<input name="" type="text" validate="number" min=1 max=3 /><span></span><br/>

数值 长度 1-3 允许为空:<input name="" type="text" validate="number" min=1 max=3 empty='yes'/><span></span><br/>

<input name="" type="submit" />

</form>

<script src="jquery.js" type="text/javascript"></script>

<script src="formValidate.js" type="text/javascript"></script>

<script type="text/javascript">

var formValidate = new formValidate();

formValidate.init({});

</script>

[javascript]

复制代码 代码如下:

/*

* 通用JS验证类

* 使用方法:

* var formValidate = new formValidate();

* formValidate.init({});

* 注意:

* <form action="" method="post" id="formValidate">

* id为formValidate

*

* <input name="" type="text" validate="zip_code" empty="yes" min=10 max=10 /><span></span>

* validate="zip_code" 验证是否是邮政编码

* empty="yes" 验证是否允许为空

* min=10 最小长度

* max=10 最大长度

* <span></span> 显示提示内容

*/

var formValidate = function () {

var _this = this;

this.options = {

number : {reg : /^[0-9]+$/, str : '必须为数字'},

decimal : {reg : /^[-]{0,1}(d+)[.]+(d+)$/ , str : '必须为DECIMAL格式'},

english : {reg : /^[A-Za-z]+$/, str : '必须为英文字母'},

upper_english : {reg : /^[A-Z]+$/, str : '必须为大写英文字母'},

lower_english : {reg : /^[a-z]+$/, str : '必须为小写英文字母'},

email : {reg : /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/, str : 'Email格式不正确'},

chinese : {reg : /[u4E00-u9FA5uf900-ufa2d]/ig, str : '必须含有中文'},

url : {reg : /^[a-zA-z]+://[^s]*/, str : 'URL格式不正确'},

phone : {reg : /^[1][3][0-9]{9}$/ , str : '电话号码格式不正确'},

ip : {reg : /^(d+).(d+).(d+).(d+)$/ , str : 'IP地址格式不正确'},

money : {reg : /^[0-9]+[.][0-9]{0,3}$/ , str : '金额格式不正确'},

number_letter : {reg : /^[0-9a-zA-Z_]+$/ , str : '只允许输入英文字母、数字、_'},

zip_code : {reg : /^[a-zA-Z0-9 ]{3,12}$/ , str : '邮政编码格式不正确'},

account : {reg : /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/ , str : '账号名不合法,允许5-16字符,字母下划线和数字'},

qq : {reg : /[1-9][0-9]{4,}/ , str : 'QQ账号不正确'},

card : {reg : /^(d{6})(18|19|20)?(d{2})([01]d)([0123]d)(d{3})(d|X)?$/ , str : '身份证号码不正确'},

};

//初始化 绑定表单 选项

this.init = function (options) {

this.setOptions(options);

this.checkForm();

};

//设置参数

this.setOptions = function (options) {

for (var key in options) {

if (key in this.options) {

this.options[key] = options[key];

}

}

};

//检测表单 包括是否为空,最大值 最小值,正则验证

this.checkForm = function () {

$("#formValidate").submit(function () {

var formChind = $("#formValidate").children();

var testResult = true;

formChind.each(function (i) {

var child = formChind.eq(i);

var value = child.val();

var len = value.length;

var childSpan = child.next();

//属性中是否为空的情况

if (child.attr('empty')) {

if (child.attr('empty') == 'yes' && value == '') {

if (childSpan) {

childSpan.html('');

}

return;

}

}

//属性中min 和 max 最大和最小长度

var min = null;

var max = null;

if (child.attr('min')) min = child.attr('min');

if (child.attr('max')) max = child.attr('max');

if (min && max) {

if (len < min || len > max) {

if (childSpan) {

childSpan.html('');

childSpan.html(' 字符串长度在' + min + '与' + max + '之间');

testResult = false;

return;

}

}

} else if (min) {

if (len < min) {

if (childSpan) {

childSpan.html('');

childSpan.html(' 字符串长度应大于' + min);

testResult = false;

return;

}

}

} else if (max) {

if (len > max) {

if (childSpan) {

childSpan.html('');

childSpan.html(' 字符串长度应小于' + max);

testResult = false;

return;

}

}

}

//正则校验

if (child.attr('validate')) {

var type = child.attr('validate');

var result = _this.check(value, type);

if (childSpan) {

childSpan.html('');

if (result != true) {

childSpan.html(' ' + result);

testResult = false;

}

}

}

});

return testResult;

});

};

//检测单个正则选项

this.check = function (value, type) {

if (this.options[type]) {

var val = this.options[type]['reg'];

if (!val.test(value)) {

return this.options[type]['str'];

}

return true;

} else {

return '找不到该表单验证正则项';

}

};

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类