JS表单验证的代码(常用)
来源: 阅读:979 次 日期:2016-07-08 14:12:54
温馨提示: 小编为您整理了“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为正则表达式必选项

      //返回值:如果能匹配则返回结果数组,如果不能匹配返回null

if (a.match(/[^\x00-\xff]/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",

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.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;

}

if(!flag){

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>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p><input id="demo" type="text"><script>function myFunction(){var x=document.getElementById("demo").value;if(x==""){ alert("输入不能为空"); return;}if(isNaN(x)){ alert("请输入数字"); return;}if(x.length!=6){ alert("请输入6位数字"); return;}}</script><button type="button" onclick="myFunction()">点击这里</button></body></html> 

//验证密码为数字字母下划线

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])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/.test(val);

}

///手机号码验证

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表单验证的代码(常用)
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map