javascript基本的表单验证和正则表单验证

来源：互联网发布：写一个数组去重编辑：程序博客网时间：2024/05/05 01:40

========================================基本验证=============================================

/*同意协议提交按钮可用*/

function ychecked(){ document.Myform.sub.disabled=!document.Myform.isok.checked; //disabled 属性规定应该禁用 input 元素。被禁用的 input 元素既不可用，也不可点击。

}

/*页面加载出现验证码*/ function getyzm(){ var yzm=parseInt(Math.random()*9000+1000); var Syzm=document.getElementById("getyzm"); Syzm.innerHTML=yzm; Syzm.style.color="red";

}

/*校验验证码*/ function xyyzm(){ /*获得验证码*/ var yzm=document.getElementById("getyzm").innerHTML;//innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。 /*获得输入验证码*/ var inputyzm=document.Myform.yzm.value; if(inputyzm==null||inputyzm.length==0){ yzmSpan.innerHTML="表单项[验证码]不能为空！" yzmSpan.style.color="red"; return false; }else if(inputyzm!=yzm){ yzmSpan.innerHTML="表单项[验证码]输入有误"; yzmSpan.style.color="red"; return false; }else { yzmSpan.innerHTML="ok"; yzmSpan.style.color="green"; return true; }

}

}

//纯文本表单验证 /*------------------------提取文本类的表单项---------------------------------*/ function show(reg,id){ //获得对象 var upwd=document.getElementById(id); //获得span对象 var span=document.getElementById(id+"Span"); //获得value值 var val=upwd.value; //获得alt值 var altval=upwd.alt; if(val==null||val.length==0){ span.innerHTML="表单项【"+altval+"】不能为空" span.style.color="red"; return false; }else{ if(!reg.test(val)){ span.innerHTML="表单项【"+altval+"】格式错误"; span.style.color="red"; return false; }else{ span.innerHTML="ok!"; span.style.color="green"; return true; } }

}

/*------------------------文本类的表单项---------------------------------*/ //验证用户名 function yzuname(){//首尾不能是数字其他科包含数字字母下划线范围6-12位 //创建正则对象 var reg=/^\D\w{5,11}$/ig;//正则表达式 var id="uname"; return show(reg,id);

}

//验证密码 function xypwd(){ //获得正则表达式 var reg=/^\d{6}$/g; //6位数字 var id="upwd"; return show(reg,id);

}

/*验证真实姓名*/ function yztname(){ var reg=/^[\u4e00-\u9fa5]{2,4}$/g; var id="tname"; return show(reg,id);

}

/*验证邮箱*/ function yzemail(){ var reg=/^(\w)+(\.\w)*@(\w)+(\.\w{2,3}){1,2}$/ig; var id="email"; return show(reg,id);

}

/*验证手机号*/

function yzphone(){ var reg=/^1[345678]\w{9}$/g; var id="phone"; return show(reg,id);

}

/*验证日期*/ function riqi(){ var reg=/^\d{4}\/([[0]\d{1}]|[1][12])\/(([0][1-9])|([12]\d{1})|([3][01]))$/g; var id="date"; return show(reg,id); } //汇总验证 function formsub(){ return xyyzm()&&xypwd()&&yzuname()&&yzphone()&&yzemail()&&yztname()&&getyzm() &&xychecked()&&riqi(); } </script>

</head>

<body onload="getyzm();"> <form action="http://www.baidu.com" method="get" target="_blank" name="Myform" onsubmit="return formsub();"> 用户名： <input type="text" name="uname" id="uname" alt="用户名" onblur="yzuname(); "/> <span id="unameSpan"></span><br /> 密----码： <input type="password" name="upwd" id="upwd" alt="密码" onblur="xypwd();"/> <span id="upwdSpan"></span><br /> 确认密码： <input type="password" name="qrpwd" id="qrpwd" alt="确认密码" /> <span id="qrpwd"></span><br /> 真实姓名： <input type="text" name="tname" id="tname" alt="真实姓名" onblur="yztname();"/> <span id="tnameSpan"></span><br /> 电子邮箱： <input type="text" name="email" id="email" alt="电子邮箱" onblur="yzemail();"/> <span id="emailSpan"></span><br /> 手机号码： <input type="text" name="phone" id="phone" alt="手机号码" onblur="yzphone();"/> <span id="phoneSpan"></span><br /> 日----期： <input type="text" name="date" id="date" alt="日期" onblur="riqi();"/> <span id="dateSpan"></span><br /> 爱好：<br /> <input type="checkbox" name="ah" value="1" onclick="xychecked();"/>电视<br /> <input type="checkbox" name="ah" value="2" onclick="xychecked();"/>电影<br /> <input type="checkbox" name="ah" value="3" onclick="xychecked();"/>看书<br /> <input type="checkbox" name="ah" value="4" onclick="xychecked();"/>吃饭<br /> <input type="checkbox" name="ah" value="5" onclick="xychecked();"/>睡觉<br /> <span id="ahSpan"></span><br /> 验证码： <input type="text" size="4" name="yzm" id="yzm" onblur="xyyzm();"/> <span id="getyzm" title="点击更换" onclick="getyzm();"></span> <span id="yzmSpan" ></span><br /> <input type="checkbox" id="isok" name="isok" onclick="ychecked();"/>同意公司的协议<br /> <input type="submit" value="提交" name="sub" disabled="disabled"/> </form>

</body>

========================================基本正则验证=============================================

// 检查是否为有效的真实姓名，只能含有中文或大写的英文字母

function isValidTrueName(strName){

var str = Trim(strName);

//判断是否为全英文大写或全中文，可以包含空格

var reg = /^[A-Z u4E00-u9FA5]+$/;

if(reg.test(str)){

return false;

}

return true;

}

JavaScript表单验证年龄

JavaScript表单验证年龄，判断一个输入量是否符合年龄，通过正则表达式实现。

复制代码代码如下:

//检查年龄

function isAge(str){

var mydate=new Date;

var now=mydate.getFullYear();

if (str < now-60 || str > now-18){

return false;

}

return true;

}

JavaScript表单验证电话号码

JavaScript表单验证电话号码，判断一个输入量是否为电话号码，通过正则表达式实现。

复制代码代码如下:

//检查电话号码

function isTel(str){

var reg=/^([0-9]|[\-])+$/g ;

if(str.length18){

return false;

}

else{

return reg.exec(str);

}

正则表达式验证邮箱

JavaScript表单验证email，判断一个输入量是否为邮箱email，通过正则表达式实现。

复制代码代码如下:

//检查email邮箱

function isEmail(str){

var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;

return reg.test(str);

}

JavaScript表单验证中文大写字母

JavaScript表单验证中文大写字母，判断一个输入量是否为中文或大写的英文字母，通过正则表达式实现。

复制代码代码如下:

// 检查是否为有效的真实姓名，只能含有中文或大写的英文字母

function isValidTrueName(strName){

var str = Trim(strName);

//判断是否为全英文大写或全中文，可以包含空格

var reg = /^[A-Z u4E00-u9FA5]+$/;

if(reg.test(str)){

return false;

}

return true;

}

JavaScript表单验证中文大写字母

JavaScript表单验证中文大写字母，判断一个输入量是否为中文或大写的英文字母，通过正则表达式实现。

复制代码代码如下:

// 检查是否为有效的真实姓名，只能含有中文或大写的英文字母

function isValidTrueName(strName){

var str = Trim(strName);

//判断是否为全英文大写或全中文，可以包含空格

var reg = /^[A-Z u4E00-u9FA5]+$/;

if(reg.test(str)){

return false;

}

return true;

}

JavaScript表单验证是否为中文

JavaScript表单验证是否为中文，判断一个输入量是否为中文，通过正则表达式实现

复制代码代码如下:

// 检查是否为中文

function isChn(str){

var reg = /^+$/;

if(!reg.test(str)){

return false;

}

return true;

}

JavaScript表单验证密码

JavaScript表单验证密码是检查输入框是否为有效的密码，

密码只允许由ascii组成，

此函数只在修改或注册密码时使用。

也就是说一切不是ascii组成的字符串都不能通过验证。

具体函数checkValidPasswd请看下面的演示代码

复制代码代码如下:

function checkValidPasswd(str){

var reg = /^[x00-x7f]+$/;

if (! reg.test(str)){

return false;

}

if (str.length < 6 || str.length > 16){

return false;

}

return true;

}

JavaScript正则验证IP

JavaScript正则验证IP，用途：校验ip地址的格式

输入：strIP：ip地址

返回：如果JavaScript通过验证IP返回true,否则返回false；

JavaScript验证IP代码如下

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;

}

通过正则去判断获得是是否是IP地址的格式，然后返回相应的结果

0 0