常用javascript表单验证汇总_javascript技巧
程序员文章站
2022-03-18 09:31:36
...
实例讲解:验证输入的是否是数字,是否满足数字位数,如果错误,并进行友情提醒。
效果图:
我的第一段 JavaScript
请输入数字。如果输入值不是数字,浏览器会弹出提示框。
上面这个实例包含了许多常用的表单验证的代码,下面分享给大家:
1、验证表单
2、验证昵称
3、计算昵称长度
4、验证昵称是否存在
5、验证手机号
6、验证密码
7、验证邮箱
8、验证验证码
9、判断是否选中
注册验证为例:
//验证表单 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(length16){ 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(" "+message); //jQuery("#nickName").focus(); }else{ jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#nickNameP").html(""); jQuery("#nickNameP").html(" 该昵称可用"); } return flag; } //计算昵称长度 function getNickNameLength(){ var nickName = jQuery("#nickName").val(); var len = 0; for (var i = 0; i "+message); //jQuery("#phone").focus(); }else{ jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#phoneP").html(""); jQuery("#phoneP").html(" 该手机号码可用"); } 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", async:false, 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.length16){ 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(" "+message); //jQuery("#password").focus(); }else{ jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#passwordP").html(""); jQuery("#passwordP").html(" 该密码可用"); } 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(" "+message); //jQuery("#confirm_password").focus(); }else{ jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#confirmPasswordP").html(""); jQuery("#confirmPasswordP").html(" 密码正确"); } 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(" "+message); //jQuery("#email").focus(); }else{ jQuery("#emailDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#emailP").html(""); jQuery("#emailP").html(" 该邮箱可用"); } 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; } if(!flag){ jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-error"); jQuery("#randCodeP").html(""); jQuery("#randCodeP").html(" "+message); //jQuery("#randCode").focus(); }else{ jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#randCodeP").html(""); jQuery("#randCodeP").html(" "); } 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,"");//去除文章中间空格 }
以上就是实用的javascript表单验证,希望大家喜欢。
上一篇: css需要什么环境
推荐阅读
-
详解JavaScript中的表单验证
-
一些手写JavaScript常用的函数汇总
-
ASP中JavaScript处理复杂表单的生成与验证第1/3页
-
用 Javascript 验证表单(form)中多选框(checkbox)值
-
用 Javascript 验证表单(form)中的单选(radio)值
-
Javascript的console[']常用输入方法汇总
-
JavaScript表单验证示例详解
-
javascript验证form表单数据的案例详解
-
javascript Zifa FormValid 0.1表单验证 代码打包下载
-
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】