JS表单验证-12个常用的JS表单验证-白红宇

JS表单验证-12个常用的JS表单验证

阅读量：5063 次

发布时间：2019-06-12

本文共 6505 字，大约阅读时间需要 21 分钟。

JS表单验证-12个常用的JS表单验证

最近有个项目用到了表单验证，小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下，和大家一起分享~~~

1. 长度限制

<br />

</form>

function test()

{

if(document.a.b.value.length>50)

{

alert("不能超过50个字符！");

document.a.b.focus();

return false;

}

</script>

2. 只能是汉字

<p>2. 只能是汉字 </p>

function isChinese(obj){

var reg=/^[\u0391-\uFFE5]+$/;

if(obj!=""&&!reg.test(obj)){

alert('必须输入中文！');

return false;

}

</script>

以下demo中的HTML的结构与验证中文结构相似的，小编就只写js啦~~~

3. 只能是英文字母

//验证只能是字母

function checkZm(zm){

var zmReg=/^[a-zA-Z]*$/;

if(zm!=""&&!zmReg.test(zm)){

alert("只能是英文字母！");

return false;

}

</script>

4. 只能是数字

//验证只能为数字

function checkNumber(obj){

var reg = /^[0-9]+$/;

if(obj!=""&&!reg.test(obj)){

alert('只能输入数字！');

return false;

}

</script>

ps：

//判断带小数点的数字

function isNumber(str)

{

var reg = /^\d+(\.\d+)?$/;

return reg.test(str)

}

5. 只能是英文字母和数字

//验证只能是字母和数字

function checkZmOrNum(zmnum){

var zmnumReg=/^[0-9a-zA-Z]*$/;

if(zmnum!=""&&!zmnumReg.test(zmnum)){

alert("只能输入是字母或者数字,请重新输入");

return false;

}

</script>

6. 检验时间大小(与当前时间比较)

//检验时间大小(与当前时间比较)

function checkDate(obj){

var obj_value=obj.replace(/-/g,"/");//替换字符，变成标准格式(检验格式为：'2009-12-10')

// var obj_value=obj.replace("-","/");//替换字符，变成标准格式(检验格式为：'2010-12-10 11:12')

var date1=new Date(Date.parse(obj_value));

var date2=new Date();//取今天的日期

if(date1>date2){

alert("不能大于当前时间！");

return false;

}

</script>

7. 屏蔽关键字(这里屏蔽***和****)

function test(obj) {

if((obj.indexOf ("***") == 0)||(obj.indexOf ("****") == 0)){

alert("屏蔽关键字(这里屏蔽***和****)！");

return false;}

}

</script>

8. 两次输入密码是否相同

function check(){

with(document.all){

if(input1.value!=input2.value)

{

alert("密码不一致")

input1.value = "";

input2.value = "";

}

else {

alert("密码一致");

document.forms[0].submit();

}

</script>

9. 表单项不能为空

function CheckForm(obj)

{

if (obj.length == 0) {

alert("姓名不能为空!");

return false;

}

return true;

alert("姓名不能为空!");

}

</script>

10. 邮箱验证

function test(obj){

//对电子邮件的验证

var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

if(!myreg.test(obj))

{

alert('请输入有效的邮箱！');

return false;

}

</script>

11. 验证手机号

function validatemobile(mobile)

{

if(mobile.length==0)

{

alert('手机号码不能为空！');

return false;

}

if(mobile.length!=11)

{

alert('请输入有效的手机号码，需是11位！');

return false;

}

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

if(!myreg.test(mobile))

{

alert('请输入有效的手机号码！');

return false;

}

</script>

12. 验证身份证号码（需是有效身份证）

// 构造函数，变量为15位或者18位的身份证号码

function clsIDCard(CardNo) {

this.Valid=false;

this.ID15='';

this.ID18='';

this.Local='';

if(CardNo!=null)this.SetCardNo(CardNo);

}

// 设置身份证号码，15位或者18位

clsIDCard.prototype.SetCardNo = function(CardNo) {

this.ID15='';

this.ID18='';

this.Local='';

CardNo=CardNo.replace(" ","");

var strCardNo;

if(CardNo.length==18) {

pattern= /^\d{17}(\d|x|X)$/;

if (pattern.exec(CardNo)==null)return;

strCardNo=CardNo.toUpperCase();

} else {

pattern= /^\d{15}$/;

if (pattern.exec(CardNo)==null)return;

strCardNo=CardNo.substr(0,6)+'19'+CardNo.substr(6,9)

strCardNo+=this.GetVCode(strCardNo);

}

this.Valid=this.CheckValid(strCardNo);

}

// 校验身份证有效性

clsIDCard.prototype.IsValid = function() {

return this.Valid;

}

// 返回生日字符串，格式如下，1981-10-10

clsIDCard.prototype.GetBirthDate = function() {

var BirthDate='';

if(this.Valid)BirthDate=this.GetBirthYear()+'-'+this.GetBirthMonth()+'-'+this.GetBirthDay();

return BirthDate;

}

// 返回生日中的年，格式如下，1981

clsIDCard.prototype.GetBirthYear = function() {

var BirthYear='';

if(this.Valid)BirthYear=this.ID18.substr(6,4);

return BirthYear;

}

// 返回生日中的月，格式如下，10

clsIDCard.prototype.GetBirthMonth = function() {

var BirthMonth='';

if(this.Valid)BirthMonth=this.ID18.substr(10,2);

if(BirthMonth.charAt(0)=='0')BirthMonth=BirthMonth.charAt(1);

return BirthMonth;

}

// 返回生日中的日，格式如下，10

clsIDCard.prototype.GetBirthDay = function() {

var BirthDay='';

if(this.Valid)BirthDay=this.ID18.substr(12,2);

return BirthDay;

}

// 返回性别，1：男，0：女

clsIDCard.prototype.GetSex = function() {

var Sex='';

if(this.Valid)Sex=this.ID18.charAt(16)%2;

return Sex;

}

// 返回15位身份证号码

clsIDCard.prototype.Get15 = function() {

var ID15='';

if(this.Valid)ID15=this.ID15;

return ID15;

}

// 返回18位身份证号码

clsIDCard.prototype.Get18 = function() {

var ID18='';

if(this.Valid)ID18=this.ID18;

return ID18;

}

// 返回所在省，例如：上海市、浙江省

clsIDCard.prototype.GetLocal = function() {

var Local='';

if(this.Valid)Local=this.Local;

return Local;

}

clsIDCard.prototype.GetVCode = function(CardNo17) {

var Wi = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);

var Ai = new Array('1','0','X','9','8','7','6','5','4','3','2');

var cardNoSum = 0;

for (var i=0; i<CardNo17.length; i++)cardNoSum+=CardNo17.charAt(i)*Wi[i];

var seq = cardNoSum%11;

return Ai[seq];

}

clsIDCard.prototype.CheckValid = function(CardNo18) {

if(this.GetVCode(CardNo18.substr(0,17))!=CardNo18.charAt(17))return false;

if(!this.IsDate(CardNo18.substr(6,8)))return false;

var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};

if(aCity[parseInt(CardNo18.substr(0,2))]==null)return false;

this.ID18=CardNo18;

this.ID15=CardNo18.substr(0,6)+CardNo18.substr(8,9);

this.Local=aCity[parseInt(CardNo18.substr(0,2))];

return true;

}

clsIDCard.prototype.IsDate = function(strDate) {

var r = strDate.match(/^(\d{1,4})(\d{1,2})(\d{1,2})$/);

if(r==null)return false;

var d= new Date(r[1], r[2]-1, r[3]);

return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[2]&&d.getDate()==r[3]);

}