JavaScript验证表单函数大全
- 格式:doc
- 大小:21.00 KB
- 文档页数:9
经常⽤到的JS表单验证函数最近需要⽤到⽤户注册信息的表单验证,然后就查了好些资料,下⾯就给⼤家分享⼀下经常会⽤到的⼀些,JS表单验证函数,希望对⼤家有⽤。
//邮件校验1//邮件校验2//通过校验返回ture,否则返回false3function isEmail(emailStr) {4if (emailStr.length == 0) {5return fasle;6 } else {7var emailPat=/^(.+)@(.+)$/;8var specialChars="/(/)<>@,;:///"/./[/]";9var validChars="[^/s" + specialChars + "]";10var quotedUser="("[^"]*")";11 var ipDomainPat=/^(d{1,3})[.](d{1,3})[.](d{1,3})[.](d{1,3})$/;12 var atom=validChars + '+';13 var word="(" + atom + "|" + quotedUser + ")";14 var userPat=new RegExp("^" + word + "(/." + word + ")*$");15var domainPat=new RegExp("^" + atom + "(/." + atom + ")*$");16var matchArray=emailStr.match(emailPat);17if (matchArray == null) {18return false;19 }20var user=matchArray[1];21var domain=matchArray[2];22if (user.match(userPat) == null) {23return false;24 }25var IPArray = domain.match(ipDomainPat);26if (IPArray != null) {27for (var i = 1; i <= 4; i++) {28if (IPArray[i] > 255) {29return false;30 }31 }32return true;33 }34var domainArray=domain.match(domainPat);35if (domainArray == null) {36return false;37 }38var atomPat=new RegExp(atom,"g");39var domArr=domain.match(atomPat);40var len=domArr.length;41if ((domArr[domArr.length-1].length < 2) ||42 (domArr[domArr.length-1].length > 3)) {43return false;44 }45if (len < 2) {46return false;47 }48return true;49 }50 }51view code////IP地址校验//正确的IP地址回ture,否则返回falsefunction isIp(strIp) {var ipDomainPat=/^((2[0-4]d|25[0-5]|[01]?dd?).){3}(2[0-4]d|25[0-5]|[01]?dd?)$/;var matchArray=strIp.match(ipDomainPat);if(matchArray!=null){return true;}}//电话号码校验//正确的电话号码(包括区号和“-”如0571-*******[8] 010-*******[8] )则返回ture,否则返回falsefunction isTelphoneNum(telNum){var telphoneNumPat=/^0d{2}-d{7,8}|0d{3}-d{7,8}$/;var matchArray=telNum.match(telphoneNumPat);if(matchArray!=null){return true;}}//⼿机号码校验//正确的⼿机号码(如:138******** 013800571505)则返回ture,否则返回false function isMobilephoneNum(mobileNum){var mobilephoneNumPat=/^1d{10}|01d{10}$/;var matchArray=mobileNum.match(mobilephoneNumPat);if(matchArray!=null){return true;}}//纯数字验证输⼊,输⼊为纯数字则返回ture,否则返回falsefunction isDigital(str){var digitalPot=/^d*$/;var matchArray=str.match(digitalPot);if(matchArray!=null){return true;}}//18位⾝份证验证,输⼊正确的号码返回ture,否则返回falsefunction card(id){var Wi=new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);var ai="10X98765432";var sum=0var ssum=0;for(var i=0;i<17;i++){ssum=eval(Wi[i]*id.charAt(i));sum=ssum+sum;}var modNum=sum%11;if(ai.charAt(modNum)==id.charAt(17)){return true;}}View Code//纯英⽂验证输⼊,判断是否为英⽂,正确返回ture,否则返回falsefunction isEnglish(name) {if(name.length == 0)return false;for(i = 0; i < name.length; i++) {if(name.charCodeAt(i) > 128)return false;}return true;}View Code//纯中⽂验证输⼊,判断是否为中⽂,正确返回 ture,否则返回falsefunction isChinese(name){if(name.length == 0)return false;for(i = 0; i < name.length; i++) {if(name.charCodeAt(i) > 128)return true;}return false;}View Code//⾮法字符判断,str中有charset则返回turefunction contain(str,charset){var i;for(i=0;i<charset.length;i++){if(str.indexOf(charset.charAt(i))>=0){return true;}return false;}}View Code//选中⽂本框或⽂本域⽂本,在input位置加上 onClick/onFocus="textSelect();" 然后就可以使⽤以下代码function textSelect() {var obj = document.activeElement;if(obj.tagName == "TEXTAREA"){obj.select();}if(obj.tagName == "INPUT" ) {if(obj.type == "text")obj.select();}}View Code//只允许输⼊字母,数字,下划线function textOnly(){var i= window.event.keyCode ;//8=backspace//9=tab//37=left arrow//39=right arrow//46=delete//48~57=0~9//97~122=a~z//65~90=A~Z//95=_if (!((i<=57 && i>=48)||(i>=97 && i<=122)||(i>=65 && i<=90)||(i==95)||(i==8)||(i==9)||(i==37)||(i==39)||(i==46))){//window.event.keyCode=27;event.returnValue=false;return false;} else {//window.event.keyCode=keycode;return true;}}View Code//判断URL,正确的URL返回true,否则返回falsefunction isURL(URL){var urlPat=/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/;var matchArray=URL.match(urlPat);if(matchArray!=null){return true;} else {return false;}}View Code//判断短⽇期(如2003-5-23)function isDate(date){var r = date.match(/^(d{1,4})(-|/)(d{1,2})(d{1,2})$/);if(r==null){return false;}if (r[1]<1 || r[3]<1 || r[3]-1>12 || r[4]<1 || r[4]>31) {return false}var d= new Date(r[1], r[3]-1, r[4]);if(d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]){return true;}}View Code//判断短时间(HH:MM:SS)function isTime(time){var a = time.match(/^(d{1,2})(:)?(d{1,2})(d{1,2})$/);if (a == null){return false;}if (a[1]>23 || a[1]<0 || a[3]>60 || a[3]<0 || a[4]>60 || a[4]<0){return false}return true;}View Code//在表单元素中除button外,按回车键模拟TAB功能function enterToTab(){if (window.event.keyCode == 13 && window.event.ctrlKey == false && window.event.altKey == false){ if (window.event.srcElement.type != "button")window.event.keyCode = 9;} else {return true;}}View Code//在填写表单时按回车键提交表单,name为sumbit控件名function enterTOSubmit(name) {if (window.event.keyCode == 13 && window.event.ctrlKey == false && window.event.altKey == false){ var objSubmit=document.getElementById(name);objSubmit.focus;} else {return true;}}View Code//判断是否为浮点数,正确返回truefunction isFloat(float,index){var floatPat=/^(d{1,})[.](d{1,})$/;var matchArray=float.match(floatPat);if(matchArray!=null) {if(matchArray[2].length==index){return true;}}}View Code//判断字符最⼤长度,如果strin的长度不⼤于maxLen返回turefunction maxLength(strin,maxLen) {var len=0;for(var i=0;i<strin.length;i++){if(strin.charCodeAt(i)>256){len += 2;} else {len++;}}if(len<=maxLen){return true;}}View Code//判断字符最⼩长度,如果的长度不⼩于minLen返回turefunction minLength(strin,minLen) {var len=0;for(var i=0;i<strin.length;i++){if(strin.charCodeAt(i)>256){len += 2;} else {len++;}}if(len>=maxLen){return true;}}View Code//由三个函数组成checkPassWord(),charMode(),bitTotal()//校验密码复杂度,密码由数字,⼤⼩写字母,特殊字符中的任意三种组合,通过则返回true function checkPassWord(passWord,maxLen){if (passWord.length<=maxLen)return false; //密码太短Modes=0;for (i=0;i<passWord.length;i++){//测试⼀个字符并判断⼀共有多少种模式.Modes|=charMode(passWord.charCodeAt(i));}return bitTotal(Modes);}//CharMode函数//判断某个字符是属于哪⼀种类型.function charMode(iN){if (iN>=48 && iN <=57) //数字return 1;if (iN>=65 && iN <=90) //⼤写字母return 2;if (iN>=97 && iN <=122) //⼩写return 4;elsereturn 8; //特殊字符}//bitTotal函数//计算出当前密码当中⼀共有多少种模式function bitTotal(num){modes=0;for (i=0;i<4;i++){if (num & 1) modes++;num>>>=1;}if(modes==3){return true}}View Code//判断是否为合法的⽤户名,合法返回true,否则返回flase//⽤户名由字母和数字、下划线组成,且只能以字母开头,且长度最⼩为6位function isAccount(str){if(/^[a-z]w{3,}$/i.test(str)){return true;} else {return false;]}View Code//取得字符串中中⽂字的个数function getChineseNum(obstring){var pattern = /^[⼀-龥]+$/i;var maxL,minL;maxL = obstring.length;obstring = obstring.replace(pattern,"");minL = obstring.length; return (maxL - minL) }View Code。
JS表单数据验证的正则表达式(常⽤)常⽤的验证⽅法:checkUserNameflag=false;checkPasswordflag=false;checkPasswordAgianflag=false;checkEmailflag=false;// ⽤户名校验function checkUserName() {var username = $("userNeme").value;var zz = /^[A-Za-z0-9]{6,}$/;if (!zz.test(username)) {$("userName_warn").innerHTML = " × ⽤户名不符合规范";checkUserNameflag=false;} else {/*$("userName_warn").style.color='blue';$("userName_warn").innerHTML = "√ ⽤户名可⽤";*/showUserExist(username);checkUserNameflag=true;}}//重置提⽰function resetWarn(){$("userName_warn").innerHTML="";$("email_warn").innerHTML="";$("password_warn").innerHTML="";$("Repassword_warn").innerHTML="";}// 密码校验function checkPassword() {var password1 = $("password").value;if (password1.length >= 6 && password1.length <= 15) {checkPasswordflag = true;$("password_warn").style.color='blue';$("password_warn").innerHTML = " √ 密码可⽤ ";checkAgianMiMa();} else {checkPasswordflag = false;$("password_warn").innerHTML = " × 密码⾄少为 6 个字符 ";}}function checkPasswordAgian() {var password1 = $("password").value;var password2 = $("rePassword").value;if (password1 == password2) {if (password1 == "") {$("Repassword_warn").innerHTML = " × 请输⼊密码 ";checkPasswordAgianflag = false;return;}$("Repassword_warn").style.color='blue';$("Repassword_warn").innerHTML = "√ 重复输⼊密码正确";checkPasswordAgianflag = true;} else {checkPasswordAgianflag = false;$("Repassword_warn").innerHTML = " × 两次密码输⼊不同 ";}}function checkEmail(){//对电⼦邮件的验证var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;var email=$("email").value;if(!myreg.test(email)){checkEmailflag=false;$("email_warn").style.color='red';$("email_warn").innerHTML = " × 邮箱格式不符合规范";} else {checkEmailflag=true;$("email_warn").style.color='blue';$("email_warn").innerHTML = "√ 邮箱格式正确";}}function submitCheck(){alert(checkUserNameflag);if(checkUserNameflag==false || checkPasswordflag==false || checkPasswordflag==false||checkPasswordAgianflag==false || checkEmailflag==false){return;}}function $(id){return document.getElementById(id);}js正则表达式--验证表单检测⼿机号码:/0?(13|14|15|18)[0-9]{9}/检测⽤户名:(数字,英⽂,汉字,下划线,中横线):/^[A-Za-z0-9_\-\u4e00-\u9fa5]+$/密码:(数字,英⽂,下划线,中横线)/^[A-Za-z0-9_-]+$/⾝份证:/\d{17}[\d|x]|\d{15}/⾮空:/^\S+$/IP地址:/((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))/以上所述是⼩编给⼤家介绍的JS表单数据验证的正则表达式,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。
JS表单验证-12个常⽤的JS表单验证JS表单验证-12个常⽤的JS表单验证最近有个项⽬⽤到了表单验证,⼩编在项⽬完结后的这段时间把常⽤的JS表单验证demo整理了⼀下,和⼤家⼀起分享~~~ 1. 长度限制<p>1. 长度限制</p><form name=a onsubmit="return test()"><textarea name="b" cols="40" rows="6" placeholder="不能超过50个字符!"></textarea><br /><input type="submit" name="Submit" value="check"></form><script language="javascript">function test(){if(document.a.b.value.length>50){alert("不能超过50个字符!");document.a.b.focus();return false;}}</script>2. 只能是汉字<p>2. 只能是汉字 </p><input type="text" onblur="isChinese(this.value)" placeholder="请输⼊中⽂!" /><script language="javascript">function isChinese(obj){var reg=/^[\u0391-\uFFE5]+$/;if(obj!=""&&!reg.test(obj)){alert('必须输⼊中⽂!');return false;}}</script>以下demo中的HTML的结构与验证中⽂结构相似的,⼩编就只写js啦~~~3. 只能是英⽂字母<script type="text/javascript">//验证只能是字母function checkZm(zm){var zmReg=/^[a-zA-Z]*$/;if(zm!=""&&!zmReg.test(zm)){alert("只能是英⽂字母!");return false;}}</script>4. 只能是数字<script language=javascript>//验证只能为数字function checkNumber(obj){var reg = /^[0-9]+$/;if(obj!=""&&!reg.test(obj)){alert('只能输⼊数字!');return false;}}</script>5. 只能是英⽂字母和数字<script type="text/javascript">//验证只能是字母和数字function checkZmOrNum(zmnum){var zmnumReg=/^[0-9a-zA-Z]*$/;if(zmnum!=""&&!zmnumReg.test(zmnum)){alert("只能输⼊是字母或者数字,请重新输⼊");return false;}}</script>6. 检验时间⼤⼩(与当前时间⽐较)<script type="text/javascript">//检验时间⼤⼩(与当前时间⽐较)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. 屏蔽关键字(这⾥屏蔽***和****)<script type="text/javascript">function test(obj) {if((obj.indexOf ("***") == 0)||(obj.indexOf ("****") == 0)){alert("屏蔽关键字(这⾥屏蔽***和****)!");return false;}}</script>8. 两次输⼊密码是否相同<script type="text/javascript">function check(){with(document.all){if(input1.value!=input2.value){alert("密码不⼀致")input1.value = "";input2.value = "";}else {alert("密码⼀致");document.forms[0].submit();}}}</script>9. 表单项不能为空<script language="javascript">function CheckForm(obj){if (obj.length == 0) {alert("姓名不能为空!");return false;}return true;alert("姓名不能为空!");}</script>10. 邮箱验证<script language="javascript">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. 验证⼿机号<script type="text/javascript">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. 验证⾝份证号码(需是有效⾝份证)<script type="text/javascript">// 构造函数,变量为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-10clsIDCard.prototype.GetBirthDate = function() {var BirthDate='';if(this.Valid)BirthDate=this.GetBirthYear()+'-'+this.GetBirthMonth()+'-'+this.GetBirthDay(); return BirthDate;}// 返回⽣⽇中的年,格式如下,1981clsIDCard.prototype.GetBirthYear = function() {var BirthYear='';if(this.Valid)BirthYear=this.ID18.substr(6,4);return BirthYear;}// 返回⽣⽇中的⽉,格式如下,10clsIDCard.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;}// 返回⽣⽇中的⽇,格式如下,10clsIDCard.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]);}function valiIdCard(idCard){var checkFlag = new clsIDCard(idCard);if (!checkFlag.IsValid()) {alert("输⼊的⾝份证号⽆效,请输⼊真实的⾝份证号!");document.getElementByIdx("idCard").focus();return false;}else{alert("是有效⾝份证!");}}</script>。
表单验证—js循环所有表单验证【封装为表单验证的专⽤js,所有表单页⾯都可以调⽤】1、表单<form id="regForm" method="post" action="index/register" onsubmit="checkForm(this)">....<td><label class="ui-green"><input type="submit" name="submit" value="提交注册"/></label></td>2、验证form表单function checkForm(frm){var els = frm.getElementsByTagName("input");for(var i=0; i<els.length; i++) {if(typeof(els[i].getAttribute("onblur")) == "function") {if(!CheckItem(els[i])) return false;}}return true;}3、验证该表单下的所有input框function CheckItem(obj){//将input提⽰框的内容赋空obj.parentNode.parentNode.className = "";var msgBox = obj.parentNode.getElementsByTagName("span")[0];switch() {case "regUserName"://这后⾯的业务可以单独提出来作为⼀个⽅法if(obj.value == "") {msgBox.innerHTML = "密码不能为空!";//添加className⽅便统⼀管理样式msgBox.className = "error";return false;}else{//⽤户名被占⽤$.ajax({"url":"index/hasname","data":"username="+obj.value,"type":"post","dataType":"json","success":function(data){if(data=="1"){msgBox.innerHTML = "⽤户名已存在!";msgBox.className = "error";return false;}else{//⽤户名可⽤msgBox.innerHTML = "⽤户名可⽤!";msgBox.className = "nameinfo";}}});}break;case "userName":if(obj.value == "") {msgBox.innerHTML = "密码不能为空!";msgBox.className = "error";return false;}break;case "passWord":if(obj.value == "") {msgBox.innerHTML = "密码不能为空!";msgBox.className = "error";return false;}break;case "rePassWord":if(obj.value == "") {msgBox.innerHTML = "密码不能为空!";msgBox.className = "error";return false;} else if(obj.value != document.getElementById("passWord").value) { msgBox.innerHTML = "两次密码不⼀致!";msgBox.className = "error";return false;}break;case "veryCode":if(obj.value == "") {msgBox.innerHTML = "验证码不能为空!";msgBox.className = "error";return false;}break;}return true;}。
如何在JavaScript中实现表单验证和数据校验表单验证和数据校验在JavaScript中是非常重要的,它们可以帮助我们确保用户在提交表单时输入有效的数据。
本文将介绍如何使用JavaScript实现表单验证和数据校验。
一、使用JavaScript实现表单验证在JavaScript中,可以使用一些常用的方法和技巧来验证表单的输入。
以下是实现表单验证的步骤:1.获取表单元素:首先,需要使用JavaScript选择器获取表单元素。
可以使用getElementById()、getElementsByTagName()或querySelector()等方法来获取表单元素。
2.添加事件监听器:接下来,可以使用addEventListener()方法为表单元素添加一个submit事件监听器。
这样,当用户提交表单时,可以触发相应的验证逻辑。
3.编写验证逻辑:在事件监听器中,可以编写一些验证逻辑。
例如,可以检查输入框是否为空、检查邮箱地址格式是否正确等。
可以使用正则表达式、条件语句等来实现不同的验证逻辑。
4.验证结果提示:最后,根据验证结果,可以使用alert()、innerHTML()或console.log()等方法来提示用户验证结果。
以下是一个示例代码,演示了如何使用JavaScript实现简单的表单验证:```javascript//获取表单元素var form = document.getElementById('myForm');//添加事件监听器form.addEventListener('submit', function(event) {//阻止表单默认提交行为event.preventDefault();//获取输入框的值var name = document.getElementById('name').value;//验证逻辑if (name === '') {alert('请输入姓名');} else {alert('提交成功');form.reset();}});```二、使用JavaScript实现数据校验除了表单验证,JavaScript还可以用于对数据进行校验。
如何在JavaScript中实现表单的验证和数据校验表单验证和数据校验在Web开发中非常重要,可以确保用户提供的数据符合预期并在后端进行处理。
在JavaScript中,可以使用各种技术和库来实现表单验证和数据校验。
接下来,我将为您提供一种基本的方法,用于实现表单验证和数据校验。
1. HTML5表单验证HTML5提供了一些表单验证的内置功能,可以在客户端进行基本的数据校验。
以下是一些常用的HTML5表单验证属性:- required:设置字段为必填字段,如果没有填写将无法提交表单。
- pattern:使用正则表达式验证字段的值。
- type属性验证:比如email类型会验证输入是否为有效的电子邮件地址。
这些HTML5表单验证属性可以帮助我们在不使用JavaScript的情况下进行表单校验。
然而,它们的功能有限,无法满足特定的验证需求。
2.自定义JavaScript表单验证自己编写JavaScript代码来实现表单验证可以很灵活,满足更多的验证需求。
以下是一个基本的示例代码,用于验证表单字段:```javascript//获取表单元素和错误提示元素const form = document.querySelector('form');const errorElement = document.getElementById('error');form.addEventListener('submit', (event) => {event.preventDefault(); //阻止表单提交//验证表单字段const name = document.getElementById('name').value;const email = document.getElementById('email').value;if (name === '' || email === '') {errorElement.textContent = '请填写所有字段';return;}if (!validateEmail(email)) {errorElement.textContent = '请输入有效的电子邮件地址'; return;}//提交表单form.submit();});//验证电子邮件地址的函数function validateEmail(email) {const re = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;return re.test(String(email).toLowerCase());}```上述代码通过添加事件监听器来捕获表单的提交事件。
JS表单验证的代码(常⽤)最近没有项⽬做,有点空余时间,⼩编把⽇常⽐较常⽤的js表单验证代码整理分享到平台,供⼤家学习,需要的朋友参考下吧!注册验证:<script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script>//验证表单function vailForm(){var form = jQuery("#editForm");if(!vailNickName())return;if(!vailPhone())return;if(!vailPwd())return;if(!vailConfirmPwd())return;if(!vailEmail())return;if(!vailCode())return;if(!vailAgree())return;form.submit();}//验证昵称function vailNickName(){var nickName = jQuery("#nickName").val();var flag = false;var message = "";var patrn=/^\d+$/;var length = getNickNameLength();if(nickName == ''){message = "昵称不能为空!";}else if(length<4||length>16){message = "昵称为4-16个字符!";} else if(checkNickNameIsExist()){message = "该昵称已经存在,请重新输⼊!";}else{flag = true;}if(!flag){jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-error");jQuery("#nickNameP").html("");jQuery("#nickNameP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);//jQuery("#nickName").focus();}else{jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-success");jQuery("#nickNameP").html("");jQuery("#nickNameP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该昵称可⽤");}return flag;}//计算昵称长度function getNickNameLength(){var nickName = jQuery("#nickName").val();var len = 0;for (var i = 0; i < nickName.length; i++) {var a = nickName.charAt(i); //函数格式:stringObj.match(rgExp) stringObj为字符串必选 rgExp为正则表达式必选项 //返回值:如果能匹配则返回结果数组,如果不能匹配返回nullif (a.match(/[^ 00- ff]/ig) != null){len += 2;}else{len += 1;}}return len;}//验证昵称是否存在function checkNickNameIsExist(){var nickName = jQuery("#nickName").val();var flag = false;jQuery.ajax({ url: "checkNickName?t=" + (new Date()).getTime(),data:{nickName:nickName},dataType:"json",type:"GET",async:false,success:function(data) {var status = data.status;if(status == "1"){flag = true;}}});return flag;}//验证⼿机号function vailPhone(){var phone = jQuery("#phone").val();var flag = false;var message = "";//var myreg = /^(((13[0-9]{1})|159|153)+\d{8})$/;var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-3]{1})|(18[5-9]{1}))+\d{8})$/;if(phone == ''){message = "⼿机号码不能为空!";}else if(phone.length !=11){message = "请输⼊有效的⼿机号码!";}else if(!myreg.test(phone)){message = "请输⼊有效的⼿机号码!";}else if(checkPhoneIsExist()){message = "该⼿机号码已经被绑定!";}else{flag = true;}if(!flag){jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-error");jQuery("#phoneP").html("");jQuery("#phoneP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);//jQuery("#phone").focus();}else{jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-success");jQuery("#phoneP").html("");jQuery("#phoneP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该⼿机号码可⽤");}return flag;}//验证⼿机号是否存在function checkPhoneIsExist(){var phone = jQuery("#phone").val();var flag = true;jQuery.ajax({ url: "checkPhone?t=" + (new Date()).getTime(),data:{phone:phone},dataType:"json",type:"GET",success:function(data) {var status = data.status;if(status == "0"){flag = false;}}});return flag;}//验证密码function vailPwd(){var password = jQuery("#password").val();var flag = false;var message = "";var patrn=/^\d+$/;if(password ==''){message = "密码不能为空!";}else if(password.length<6 || password.length>16){message = "密码6-16位!";}else if(patrn.test(password)){message = "密码不能全是数字!";}else{flag = true;}if(!flag){jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-error");jQuery("#passwordP").html("");jQuery("#passwordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);//jQuery("#password").focus();}else{jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-success");jQuery("#passwordP").html("");jQuery("#passwordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该密码可⽤");}return flag;}//验证确认密码function vailConfirmPwd(){var confirmPassword = jQuery("#confirm_password").val();var patrn=/^\d+$/;var password = jQuery("#password").val();var flag = false;var message = "";if(confirmPassword == ''){message = "请输⼊确认密码!";}else if(confirmPassword != password){message = "⼆次密码输⼊不⼀致,请重新输⼊!";}else if(patrn.test(password)){message = "密码不能全是数字!";}else {flag = true;}if(!flag){jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-error");jQuery("#confirmPasswordP").html("");jQuery("#confirmPasswordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message); //jQuery("#confirm_password").focus();}else{jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-success");jQuery("#confirmPasswordP").html("");jQuery("#confirmPasswordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>密码正确"); }return flag;}//验证邮箱function vailEmail(){var email = jQuery("#email").val();var flag = false;var message = "";var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;if(email ==''){message = "邮箱不能为空!";}else if(!myreg.test(email)){message = "请输⼊有效的邮箱地址!";}else if(checkEmailIsExist()){message = "该邮箱地址已经被注册!";}else{flag = true;}if(!flag){jQuery("#emailDiv").removeClass().addClass("ui-form-item has-error");jQuery("#emailP").html("");jQuery("#emailP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);//jQuery("#email").focus();}else{jQuery("#emailDiv").removeClass().addClass("ui-form-item has-success");jQuery("#emailP").html("");jQuery("#emailP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该邮箱可⽤");}return flag;}//验证邮箱是否存在function checkEmailIsExist(){var email = jQuery("#email").val();var flag = false;jQuery.ajax({ url: "checkEmail?t=" + (new Date()).getTime(),data:{email:email},dataType:"json",type:"GET",async:false,success:function(data) {var status = data.status;if(status == "1"){flag = true;}}});return flag;}//验证验证码function vailCode(){var randCode = jQuery("#randCode").val();var flag = false;var message = "";if(randCode == ''){message = "请输⼊验证码!";}else if(!checkCode()){message = "验证码不正确!";}else{flag = true;}jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-error");jQuery("#randCodeP").html("");jQuery("#randCodeP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);//jQuery("#randCode").focus();}else{jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-success");jQuery("#randCodeP").html("");jQuery("#randCodeP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>");}return flag;}//检查随机验证码是否正确function checkCode(){var randCode = jQuery("#randCode").val();var flag = false;jQuery.ajax({ url: "checkRandCode?t=" + (new Date()).getTime(),data:{randCode:randCode},dataType:"json",type:"GET",async:false,success:function(data) {var status = data.status;if(status == "1"){flag = true;}}});return flag;}//判断是否选中function vailAgree(){if(jQuery("#agree").is(":checked")){return true;}else{alert("请确认是否阅读并同意XX协议");}return false;}function delHtmlTag(str){ var str=str.replace(/<\/?[^>]*>/gim,"");//去掉所有的html标记 var result=str.replace(/(^\s+)|(\s+$)/g,"");//去掉前后空格 return result.replace(/\s/g,"");//去除⽂章中间空格}<!DOCTYPE html><html><body><h1>我的第⼀段 JavaScript</h1><p //验证密码为数字字母下划线function CheckPwd(pwd) {var validStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_~/!@#$%^&*();-+.=,";for (i = 0; i < pwd.length; i++) {if (validStr.indexOf(pwd.charAt(i)) == -1) {return false;}}return true;}//验证邮箱格式function checkemail(email) {var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;if (!filter.test(email)) {return false;}return true;}function isEmail(val) {return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_\`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|(( 22)(((( 20| 09)*( 0d 0a))?( 20| 09)+)?(([ 01- 08 0b 0c 0e- 1f 7f]| 21|[ 23- 5b]| }///⼿机号码验证function checktelephone(cellPhone) {var RegCellPhone = /^([0-9]{11})?$/;falg = cellPhone.search(RegCellPhone);if (falg == -1) {return false;} else {return true;}}//获取URL参数值function getParameter(param) {var query = window.location.search;var iLen = param.length;var iStart = query.indexOf(param);if (iStart == -1)return "";iStart += iLen + 1;var iEnd = query.indexOf("&", iStart);if (iEnd == -1)return query.substring(iStart);return query.substring(iStart, iEnd);}以上代码是⼩编给⼤家介绍的js表单验证,代码简单易懂,⾮常实⽤,希望对⼤家有所帮助,同时也⾮常感谢⼤家对⽹站的⽀持!。
常用JS检验函数(正则表达式)/************************************************************** ******************** EO_JSLib.js* javascript正则表达式检验*************************************************************** *******************///校验是否全由数字组成function isDigit(s){var patrn=/^[0-9]{1,20}$/;if (!patrn.exec(s)) return falsereturn true}//校验登录名:只能输入5-20个以字母开头、可带数字、“_”、“.”的字串function isRegisterUserName(s){var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;if (!patrn.exec(s)) return falsereturn true}//校验用户姓名:只能输入1-30个以字母开头的字串function isTrueName(s){var patrn=/^[a-zA-Z]{1,30}$/;if (!patrn.exec(s)) return falsereturn true}//校验密码:只能输入6-20个字母、数字、下划线function isPasswd(s){var patrn=/^(\w){6,20}$/;if (!patrn.exec(s)) return falsereturn true}//校验普通电话、传真号码:可以“+”开头,除数字外,可含有“-”function isTel(s){//var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?(\d){1,12})+$/;var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;if (!patrn.exec(s)) return falsereturn true}//校验手机号码:必须以数字开头,除数字外,可含有“-”function isMobil(s){var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;if (!patrn.exec(s)) return falsereturn true}//校验邮政编码function isPostalCode(s){//var patrn=/^[a-zA-Z0-9]{3,12}$/;var patrn=/^[a-zA-Z0-9 ]{3,12}$/;if (!patrn.exec(s)) return falsereturn true}//校验搜索关键字function isSearch(s){varpatrn=/^[^`~!@#$%^&*()+=|\\\][\]\{\}:;\‘\,.<>/?]{1}[^`~!@$% ^&()+=|\\\][\]\{\}:;\‘\,.<>?]{0,19}$/;if (!patrn.exec(s)) return falsereturn true}function isIP(s) //by zergling{var patrn=/^[0-9.]{1,20}$/;if (!patrn.exec(s)) return falsereturn true}/************************************************************** ******************** FUNCTION: isBetween* PARAMETERS: val AS any value* lo AS Lower limit to check* hi AS Higher limit to check* CALLS: NOTHING* RETURNS: TRUE if val is between lo and hi both inclusive, otherwise false.*************************************************************** *******************/function isBetween (val, lo, hi) {if ((val < lo) || (val > hi)) { return(false); }else { return(true); }}/************************************************************** ******************** FUNCTION: isDate checks a valid date* PARAMETERS: theStr AS String* CALLS: isBetween, isInt* RETURNS: TRUE if theStr is a valid date otherwise false.*************************************************************** *******************/function isDate (theStr) {var the1st = theStr.indexOf(‘-‘);var the2nd = stIndexOf(‘-‘);if (the1st == the2nd) { return(false); }else {var y = theStr.substring(0,the1st);var m = theStr.substring(the1st+1,the2nd);var d = theStr.substring(the2nd+1,theStr.length);var maxDays = 31;if (isInt(m)==false || isInt(d)==false || isInt(y)==false) {return(false); }else if (y.length < 4) { return(false); }else if (!isBetween (m, 1, 12)) { return(false); }else if (m==4 || m==6 || m==9 || m==11) maxDays = 30;else if (m==2) {if (y % 4 > 0) maxDays = 28;else if (y % 100 == 0 && y % 400 > 0) maxDays = 28;else maxDays = 29;}if (isBetween(d, 1, maxDays) == false) { return(false); }else { return(true); }}}/************************************************************** ******************** FUNCTION: isEuDate checks a valid date in British format * PARAMETERS: theStr AS String* CALLS: isBetween, isInt* RETURNS: TRUE if theStr is a valid date otherwise false.*************************************************************** *******************/function isEuDate (theStr) {if (isBetween(theStr.length, 8, 10) == false) { return(false); } else {var the1st = theStr.indexOf(‘/‘);var the2nd = stIndexOf(‘/‘);if (the1st == the2nd) { return(false); }else {var m = theStr.substring(the1st+1,the2nd);var d = theStr.substring(0,the1st);var y = theStr.substring(the2nd+1,theStr.length);var maxDays = 31;if (isInt(m)==false || isInt(d)==false || isInt(y)==false) {return(false); }else if (y.length < 4) { return(false); }else if (isBetween (m, 1, 12) == false) { return(false); }else if (m==4 || m==6 || m==9 || m==11) maxDays = 30;else if (m==2) {if (y % 4 > 0) maxDays = 28;else if (y % 100 == 0 && y % 400 > 0) maxDays = 28;else maxDays = 29;}if (isBetween(d, 1, maxDays) == false) { return(false); }else { return(true); }}}}/************************************************************** ******************* FUNCTION: Compare Date! Which is the latest!* PARAMETERS: lessDate,moreDate AS String* CALLS: isDate,isBetween* RETURNS: TRUE if lessDate<moreDate*************************************************************** ******************/function isComdate (lessDate , moreDate){if (!isDate(lessDate)) { return(false);}if (!isDate(moreDate)) { return(false);}var less1st = lessDate.indexOf(‘-‘);var less2nd = stIndexOf(‘-‘);var more1st = moreDate.indexOf(‘-‘);var more2nd = stIndexOf(‘-‘);var lessy = lessDate.substring(0,less1st);var lessm = lessDate.substring(less1st+1,less2nd);var lessd = lessDate.substring(less2nd+1,lessDate.length);var morey = moreDate.substring(0,more1st);var morem = moreDate.substring(more1st+1,more2nd);var mored = moreDate.substring(more2nd+1,moreDate.length);var Date1 = new Date(lessy,lessm,lessd);var Date2 = new Date(morey,morem,mored);if (Date1>Date2) { return(false);}return(true);}/************************************************************** ******************** FUNCTION isEmpty checks if the parameter is empty or null * PARAMETER str AS String*************************************************************** *******************/function isEmpty (str) {if ((str==null)||(str.length==0)) return true;else return(false);}/************************************************************** ******************** FUNCTION: isInt* PARAMETER: theStr AS String* RETURNS: TRUE if the passed parameter is an integer, otherwise FALSE* CALLS: isDigit*************************************************************** *******************/function isInt (theStr) {var flag = true;if (isEmpty(theStr)) { flag=false; }else{ for (var i=0; i<theStr.length; i++) {if (isDigit(theStr.substring(i,i+1)) == false) {flag = false; break;}}}return(flag);}/************************************************************** ******************** FUNCTION: isReal* PARAMETER: heStr AS StringdecLen AS Integer (how many digits after period)* RETURNS: TRUE if theStr is a float, otherwise FALSE* CALLS: isInt*************************************************************** *******************/function isReal (theStr, decLen) {var dot1st = theStr.indexOf(‘.‘);var dot2nd = stIndexOf(‘.‘);var OK = true;if (isEmpty(theStr)) return false;if (dot1st == -1) {if (!isInt(theStr)) return(false);else return(true);}else if (dot1st != dot2nd) return (false);else if (dot1st==0) return (false);else {var intPart = theStr.substring(0, dot1st);var decPart = theStr.substring(dot2nd+1);if (decPart.length > decLen) return(false);else if (!isInt(intPart) || !isInt(decPart)) return (false);else if (isEmpty(decPart)) return (false);else return(true);}}/************************************************************** ******************** FUNCTION: isEmail* PARAMETER: String (Email Address)* RETURNS: TRUE if the String is a valid Email address* FALSE if the passed string is not a valid Email Address* EMAIL FORMAT: AnyName@EmailServer e.g; ********************** @ sign can appear only once in the email address.*************************************************************** ******************/function isEmail (theStr) {var atIndex = theStr.indexOf(‘@‘);var dotIndex = theStr.indexOf(‘.‘, atIndex);var flag = true;theSub = theStr.substring(0, dotIndex+1)if ((atIndex < 1)||(atIndex != stIndexOf(‘@‘))||(dotIndex < atIndex + 2)||(theStr.length <= theSub.length)){ return(false); }else { return(true); }}/********************************************************************************** FUNCTION: newWindow* PARAMETERS: doc -> Document to open in the new windowhite -> Height of the new windowwide -> Width of the new windowbars -> 1-Scroll bars = YES 0-Scroll Bars = NOresize -> 1-Resizable = YES 0-Resizable = NO* CALLS: NONE* RETURNS: New window instance*************************************************************** *******************/function newWindow (doc, hite, wide, bars, resize) {var winNew="_blank";varopt="toolbar=0,location=0,directories=0,status=0,menubar=0,";opt+=("scrollbars="+bars+",");opt+=("resizable="+resize+",");opt+=("width="+wide+",");opt+=("height="+hite);winHandle=window.open(doc,winNew,opt);return;}/************************************************************** ******************** FUNCTION: DecimalFormat* PARAMETERS: paramValue -> Field value* CALLS: NONE* RETURNS: Formated string**********************************************************************************/function DecimalFormat (paramValue) {var intPart = parseInt(paramValue);var decPart =parseFloat(paramValue) - intPart;str = "";if ((decPart == 0) || (decPart == null)) str += (intPart + ".00");else str += (intPart + decPart);return (str);}"^\\d+$" //非负整数(正整数 + 0)"^[0-9]*[1-9][0-9]*$" //正整数"^((-\\d+)|(0+))$" //非正整数(负整数 + 0)"^-[0-9]*[1-9][0-9]*$" //负整数"^-?\\d+$" //整数"^\\d+(\\.\\d+)?$" //非负浮点数(正浮点数 + 0)"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$" //正浮点数"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$" //非正浮点数(负浮点数 + 0)"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$" //负浮点数"^(-?\\d+)(\\.\\d+)?$" //浮点数"^[A-Za-z]+$" //由26个英文字母组成的字符串"^[A-Z]+$" //由26个英文字母的大写组成的字符串"^[a-z]+$" //由26个英文字母的小写组成的字符串"^[A-Za-z0-9]+$" //由数字和26个英文字母组成的字符串"^\\w+$" //由数字、26个英文字母或者下划线组成的字符串"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"//email地址"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$" //url。
做网站的时候,很多地方都是由表单提交组成的,但是有提交的地方都要有验证。
客户端验证最简单的方法就是使用JS自定义函数。
这个文档包含平时常用的28 个验证函数,还有验证函数几种使用方法。
JS验证函数的调用方法和注意:1.给表单设置onsubmit="return test()",配合<input type="submit" name="Submit" value="check"> 进行提交.2.<input type=text onkeydown="test();"> //当鼠标按下直接调用函数验证3.<input type=text onblur="testl(this.value)"> //传入自己的值进行验证,test(this)//传入对象本身进行验证4.<input type="button" value="test" onclick="test()"> //单击Btn进行验证,如果通过则用document.forms[0].submit(); 进行表单提交5.<input onClick="return test();" type="submit" name="submit" value=" 提交信息">//使用submit进行提交验证,如果test中return false;则不提交返true提交.6.<script type="javascript">....function test(){...return false;...}...</script>7.||与,&&或,!非8.常用事件:onblur失去焦点,onchange失去焦点并且内容发生改变,onfocus元素获得焦点,onreset当表单中RESET的属性被激发时,onsubmit表单被提交时触发此事件9.验证正则表达式:if(/^[1-9]\d*$/.test(str))返回真则通过,FALSE通不通过10.document.getElementById("ip").value//访问ID的值,document.form1.text1.value//通过name 访问11.<input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"> //执行单条正则验证例验证函数:<input type="text" name="text1" id="text1" onblur="test();" value="" />1.字符长度限制function test(){if(document.form1.text1.value.length>50){alert("不能超过50个字符!");document.form1.text1.focus();return false;}}2.只能是英文,字母或数字function test(){if(!(event.keyCode>=65&&event.keyCode<=90)){alert("只能是英文!");document.form1.text1.focus();}}<input onblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('有错')"> //字母或数字3.只能是数字function test(){if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105) )) //考虑小键盘上的数字键{alert("只能是数字!");document.form1.text1.focus();}}或者function test(NUM){var i,j,strTemp;strTemp="0123456789";if ( NUM.length== 0)return 0for (i=0;i<NUM.length;i++){j=strTemp.indexOf(NUM.charAt(i));if (j==-1){alert("只能是数字!");return false;}}//说明是数字return true;}5.验证邮箱(正则,函数)function isEmail(strEmail) {if(strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)return true;elsealert("格式错误!");}function isEmail() {if (eremail.value.charAt(0)=="." ||eremail.value.charAt(0)=="@"||eremail.value.indexOf('@', 0) == -1 ||eremail.value.indexOf('.', 0) == -1 ||stIndexOf("@")==eremail.value .length-1 ||stIndexOf(".")==eremail.value.l ength-1){alert("Email地址格式不正确!");eremail.focus();return false;}}<input type="text" onblur="isEmail(this.value);" name="text1" />6.屏蔽关键字(这里屏蔽***和****)function test() {if((document.form1.text1.value.indexOf ("***") == 0)||(document.form1.text1.value.indexOf ("****") == 0)){alert("存在关键字");document.form1.text1.focus();return false;}}7.比较两次输入是否相同if(erpassword.value != erpassword1.value) {erpassword.focus();erpassword.value = '';erpassword1.value = '';alert("两次输入的密码不同,请重新输入!");return false;}8.判断是否为空或空格组成function test(){if(checkspace(document.form1.text1.value)) {document.form1.text1.focus();alert("为空或包含空格组成!");return false;}}function checkspace(checkstr) {var str = '';for(i = 0; i < checkstr.length; i++) {str = str + ' ';}return (str == checkstr);}或者:<input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"> //执行单条正则验证例9. 验证是否是数字电话,只能是数字和-正则:\d{3}-\d{8}|\d{4}-\d{7}function istel(elem) {var str=elem.value;var oneDecimal=false;var oneChar=0;str=str.toString( );for (var i=0; i<str.length; i++) {oneChar=str.charAt(i).charCodeAt(0);if(oneChar==45){ continue; }if(oneChar<48 || oneChar > 57) {alert("此项只能输入数字和'-'号.");return false;}}return true;}或者function fucCheckTEL(TEL){var i,j,strTemp;strTemp="0123456789-()# ";for (i=0;i<TEL.length;i++){j=strTemp.indexOf(TEL.charAt(i));if (j==-1){alert("此项只能输入数字和'-'号.");return false;}}//说明合法return true;}或者//校验普通电话、传真号码:可以“+”开头,除数字外,可含有“-”function isTel(s){//var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?(\d){1,12})+$/;var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;if (!patrn.exec(s)) return falsereturn true}或者要求:(1)电话号码由数字、"("、")"和"-"构成(2)电话号码为3到8位(3)如果电话号码中包含有区号,那么区号为三位或四位(4)区号用"("、")"或"-"和其他部分隔开(5)移动电话号码为11或12位,如果为12位,那么第一位为0(6)11位移动电话号码的第一位和第二位为"13"(7)12位移动电话号码的第二位和第三位为"13"根据这几条规则,可以与出以下正则表达式:(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)function PhoneCheck(s) {var str=s;varreg=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$) /alert(reg.test(str));}<input type="text" name="text1" onblur="istel(this);" />10.//当opt2为1时检查num是否是负数//当opt1为1时检查num是否是小数//返回1是正确的,0是错误的function chknbr(num,opt1,opt2){var i=num.length;var staus;//staus用于记录.的个数status=0;if ((opt2!=1) && (num.charAt(0)=='-')){alert("You have enter a invalid number.");return 0;}//当最后一位为.时出错if (num.charAt(i-1)=='.'){alert("You have enter a invalid number.");return 0;}for (j=0;j<i;j++){if (num.charAt(j)=='.'){status++;}if (status>1){alert("You have enter a invalid number.");return 0;}if (num.charAt(j)<'0' || num.charAt(j)>'9' ){if (((opt1==0) || (num.charAt(j)!='.')) && (j!=0)){alert("You have enter a invalid number.");return 0;}}}return 1;}11.检查是否数字或字母组成的串function test(str){var strSource="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; var ch;var i;var temp;for (i=0;i<=(str.length-1);i++){ch = str.charAt(i);temp = strSource.indexOf(ch);if (temp==-1){alert("格式不正确!");return false;}}if (strSource.indexOf(ch)==-1){alert("格式不正确!");return false;}else{return true;}}12.数字验证正整数验证^[1-9]\d*$,负整数验证^-[1-9]\d*$ ,整数^-?[1-9]\d*$,非负整数^[1-9]\d*|0$,非正正数^-[1-9]\d*|0$,浮点数^-?([1-9]\d*\. \d*|0\.\d*[1-9]\d*|0?\.0+|0)$function test(str){if(/^[1-9]\d*$/.test(str)){alert("格式不能!");return false;}else{return true;}}13.身份证正则:\d{15}|\d{18}14.IP地址正则:\d+\.\d+\.\d+\.\d+15.邮政编码正则:[1-9]\d{5}(?!\d)function isPostalCode(s){//var patrn=/^[a-zA-Z0-9]{3,12}$/; var patrn=/^[a-zA-Z0-9 ]{3,12}$/; if (!patrn.exec(s)) return false return true}16.QQ号正则:[1-9][0-9]{4,}17.HTML标记正则:\d{3}-\d{8}|\d{4}-\d{7}18.是否有效的颜色值function IsColor(color){var temp=color;if (temp=="") return true;if (temp.length!=7) return false;return (temp.search(/\\#[a-fA-F0-9]{6}/) != -1); }19.是否有效的链接function IsURL(url){var sTemp;var b=true;sTemp=url.substring(0,7);sTemp=sTemp.toUpperCase();if ((sTemp!="HTTP://")||(url.length<10)){b=false;}return b;}20.是否有效的手机号码function IsMobile(_str){var tmp_str = trim(_str);var pattern = /13\\d{9}/;return pattern.test(tmp_str);}或者//校验手机号码:必须以数字开头,除数字外,可含有“-”function IsMobile(s){var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;if (!patrn.exec(s)) return falsereturn true}21.IP地址和身份证号验证(正则)function checkIP(){obj=document.getElementById("ip").value//ip地址//varexp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25 [0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;//身份证//var exp=/\b(((?!\d\d\d)\d+|1\d\d|2[0-4]\d|25[0-5])(\b|\.)){4}///var exp=/^(\d{15}|\d{17}[x0-9])///var exp=/^([\d]{15}|[\d]{18}|[\d]{17}[x|X])$/var reg = obj.match(exp);if(reg==null){alert("IP地址不合法!");}else{alert("IP地址合法!");}}22.校验登录名:只能输入5-20个以字母开头、可带数字、“_”、“.”的字串function isRegisterUserName(s){var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;if (!patrn.exec(s)) return falsereturn true}23.校验用户姓名:只能输入1-30个以字母开头的字串function isTrueName(s){var patrn=/^[a-zA-Z]{1,30}$/;if (!patrn.exec(s)) return falsereturn true}24.校验密码:只能输入6-20个字母、数字、下划线function isPasswd(s){var patrn=/^(\w){6,20}$/;if (!patrn.exec(s)) return falsereturn true}25.日期时间类短时间,形如(13:04:06)function isTime(str){var a = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);if (a == null) {alert('输入的参数不是时间格式'); return false;} if (a[1]>24 || a[3]>60 || a[4]>60){alert("时间格式不对");return false}return true;}短日期,形如(2003-12-05)function strDateTime(str){var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);if(r==null)return false;var d= new Date(r[1], r[3]-1, r[4]);return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);}长时间,形如(2003-12-05 13:04:06)function strDateTime(str){var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;var r = str.match(reg);if(r==null)return false;var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]& &d.getMinutes()==r[6]&&d.getSeconds()==r[7]);}26.判断字符全部由a-Z或者是A-Z的字字母组成<input onblur="if(/[^a-zA-Z]/g.test(this.value))alert('有错')">27.判断字符由字母和数字,下划线,点号组成.且开头的只能是下划线和字母<input onblur="if(/^([a-zA-z_]{1})([\w]*)$/g.test(this.value))alert('有错')"& gt;28.表单的值不能为空,不能超过imax字符,不能少于imix字符,输入为中文判断function isNull(elem){//var pattern=/^\s+|\s+$/;if(elem.replace(/(^\s+|\s$)/g, "")==""){return false;}else{return true;}}function imax(elem){if(elem.length>imax){return false;}else{return true;}}function imix(elem){if(elem.lengthreturn false; }else{return true;}}function isChinese(elem){ var pattern=/[^\x00-\xff]/g; if(pattern.test(elem)){//包含中文return false;}else{//不包含中文return true;}}PDF预览和下载:< type="application/x-shockwave-flash" width="650" height="490" src="/DocinView-45143938-1436481.swf" allowscriptaccess="always" allowfullscreen="true" bgcolor="#000d19">。
JavaScript验证表单函数大全<script>/*用途:校验ip地址的格式输入:strIP:ip地址返回:如果通过验证返回true,否则返回false;*/function isIP(strIP) {if (isNull(strIP)) return false;var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式if(re.test(strIP)){if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;}return false;}/*用途:检查输入字符串是否为空或者全部都是空格输入:str返回:如果全是空返回true,否则返回false*/function isNull( str ){if ( str == "" ) return true;var regu = "^[ ]+$";var re = new RegExp(regu);return re.test(str);}/*用途:检查输入对象的值是否符合整数格式输入:str 输入的字符串返回:如果通过验证返回true,否则返回false*/function isInteger( str ){var regu = /^[-]{0,1}[0-9]{1,}$/;return regu.test(str);}/*用途:检查输入手机号码是否正确输入:s:字符串返回:如果通过验证返回true,否则返回false*/function checkMobile( s ){var regu =/^[1][3][0-9]{9}$/;var re = new RegExp(regu);if (re.test(s)) {return true;}else{return false;}}/*用途:检查输入字符串是否符合正整数格式输入:s:字符串返回:如果通过验证返回true,否则返回false*/function isNumber( s ){var regu = "^[0-9]+$";var re = new RegExp(regu);if (s.search(re) != -1) {return true;} else {return false;}}/*用途:检查输入字符串是否是带小数的数字格式,可以是负数s:字符串返回:如果通过验证返回true,否则返回false*/function isDecimal( str ){if(isInteger(str)) return true;var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;if (re.test(str)) {if(RegExp.$1==0&&RegExp.$2==0) return false;return true;} else {return false;}}/*用途:检查输入对象的值是否符合端口号格式输入:str 输入的字符串返回:如果通过验证返回true,否则返回false*/function isPort( str ){return (isNumber(str) && str<65536);}/*用途:检查输入对象的值是否符合E-Mail格式输入:str 输入的字符串返回:如果通过验证返回true,否则返回false*/function isEmail( str ){var myReg = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/; if(myReg.test(str)) return true;return false;}/*用途:检查输入字符串是否符合金额格式格式定义为带小数的正数,小数点后最多三位s:字符串返回:如果通过验证返回true,否则返回false*/function isMoney( s ){var regu = "^[0-9]+[\.][0-9]{0,3}$";var re = new RegExp(regu);if (re.test(s)) {return true;} else {return false;}}/*用途:检查输入字符串是否只由英文字母和数字和下划线组成输入:s:字符串返回:如果通过验证返回true,否则返回false*/function isNumberOr_Letter( s ){//判断是否是数字或字母var regu = "^[0-9a-zA-Z\_]+$";var re = new RegExp(regu);if (re.test(s)) {return true;}else{return false;}}/*用途:检查输入字符串是否只由英文字母和数字组成输入:s:字符串返回:如果通过验证返回true,否则返回false*/function isNumberOrLetter( s ){//判断是否是数字或字母var regu = "^[0-9a-zA-Z]+$";var re = new RegExp(regu);if (re.test(s)) {return true;}else{return false;}}/*用途:检查输入字符串是否只由汉字、字母、数字组成输入:value:字符串返回:如果通过验证返回true,否则返回false*/function isChinaOrNumbOrLett( s ){//判断是否是汉字、字母、数字组成var regu = "^[0-9a-zA-Z\u4e00-\u9fa5]+$";var re = new RegExp(regu);if (re.test(s)) {return true;}else{return false;}}/*用途:判断是否是日期输入:date:日期;fmt:日期格式返回:如果通过验证返回true,否则返回false*/function isDate( date, fmt ) {if (fmt==null) fmt="yyyyMMdd";var yIndex = fmt.indexOf("yyyy");if(yIndex==-1) return false;var year = date.substring(yIndex,yIndex+4);var mIndex = fmt.indexOf("MM");if(mIndex==-1) return false;var month = date.substring(mIndex,mIndex+2);var dIndex = fmt.indexOf("dd");if(dIndex==-1) return false;var day = date.substring(dIndex,dIndex+2);if(!isNumber(year)||year>"2100" || year< "1900") return false; if(!isNumber(month)||month>"12" || month< "01") return false; if(day>getMaxDay(year,month) || day< "01") return false;return true;}function getMaxDay(year,month) {if(month==4||month==6||month==9||month==11)return "30";if(month==2)if(year%4==0&&year%100!=0 || year%400==0)return "29";elsereturn "28";return "31";}/*用途:字符1是否以字符串2结束输入:str1:字符串;str2:被包含的字符串返回:如果通过验证返回true,否则返回false*/function isLastMatch(str1,str2){var index = stIndexOf(str2);if(str1.length==index+str2.length) return true;return false;}/*用途:字符1是否以字符串2开始输入:str1:字符串;str2:被包含的字符串返回:如果通过验证返回true,否则返回false*/function isFirstMatch(str1,str2){var index = str1.indexOf(str2);if(index==0) return true;return false;}/*用途:字符1是包含字符串2输入:str1:字符串;str2:被包含的字符串返回:如果通过验证返回true,否则返回false*/function isMatch(str1,str2){var index = str1.indexOf(str2);if(index==-1) return false;return true;}/*用途:检查输入的起止日期是否正确,规则为两个日期的格式正确,且结束如期>=起始日期输入:startDate:起始日期,字符串endDate:结束如期,字符串返回:如果通过验证返回true,否则返回false*/function checkTwoDate( startDate,endDate ) {if( !isDate(startDate) ) {alert("起始日期不正确!");return false;} else if( !isDate(endDate) ) {alert("终止日期不正确!");return false;} else if( startDate > endDate ) {alert("起始日期不能大于终止日期!");return false;}return true;}/*用途:检查输入的Email信箱格式是否正确输入:strEmail:字符串返回:如果通过验证返回true,否则返回false*/function checkEmail(strEmail) {//var emailReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/; var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;if( emailReg.test(strEmail) ){return true;}else{alert("您输入的Email地址格式不正确!");return false;}}/*用途:检查输入的电话号码格式是否正确输入:strPhone:字符串返回:如果通过验证返回true,否则返回false*/function checkPhone( strPhone ) {var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;var prompt = "您输入的电话号码不正确!"if( strPhone.length > 9 ) {if( phoneRegWithArea.test(strPhone) ){return true;}else{alert( prompt );return false;}}else{if( phoneRegNoArea.test( strPhone ) ){ return true;}else{alert( prompt );return false;}}}</script>。