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

最新推荐文章于 2022-05-08 17:13:52 发布
半城、孤影
最新推荐文章于 2022-05-08 17:13:52 发布
阅读量1.3k
点赞数
文章标签： javascript 表单正则
本文链接：https://blog.csdn.net/ZDarling/article/details/52869532
版权
 ========================================基本验证=============================================

<script type="text/javascript">

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

	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 xychecked(){

	var count=0;

	// 获得复选框对象组

	var checkeds=document.getElementsByName("ah");

	// 获得复选框验证信息span对象

	var span=document.getElementById("ahSpan");

	for(var i=0;i<checkeds.length;i++){

	if(checkeds[i].checked){

	count++;

	}

	}

	

	if(count>=2){

	span.innerHTML="ok";

	span.style.color="green";

	

	return true;

	}else {

	span.innerHTML="表单项[爱好]至少选择两项"

	span.style.color="red";

	return false;

	}

       }
	

	//纯文本表单验证

	/*------------------------提取文本类的表单项---------------------------------*/


	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 οnlοad="getyzm();">

	<form action="http://www.baidu.com" method="get" target="_blank" name="Myform" οnsubmit="return formsub();">


	用 户 名： <input type="text" name="uname" id="uname" alt="用户名" οnblur="yzuname(); "/>

	<span id="unameSpan"></span><br />


	 密----码： <input type="password" name="upwd" id="upwd" alt="密码" οnblur="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="真实姓名" οnblur="yztname();"/>

	<span id="tnameSpan"></span><br />


	 电子邮箱： <input type="text" name="email" id="email" alt="电子邮箱" οnblur="yzemail();"/>

 	<span id="emailSpan"></span><br />


	手机号码： <input type="text" name="phone" id="phone" alt="手机号码" οnblur="yzphone();"/>

	<span id="phoneSpan"></span><br />


	 日----期： <input type="text" name="date" id="date" alt="日期" οnblur="riqi();"/>

	 <span id="dateSpan"></span><br />


	 爱好：<br />

	<input type="checkbox" name="ah" value="1" οnclick="xychecked();"/>电视<br />

	 <input type="checkbox" name="ah" value="2" οnclick="xychecked();"/>电影<br />

	<input type="checkbox" name="ah" value="3" οnclick="xychecked();"/>看书<br />

	 <input type="checkbox" name="ah" value="4" οnclick="xychecked();"/>吃饭<br />

	<input type="checkbox" name="ah" value="5" οnclick="xychecked();"/>睡觉<br />

	 <span id="ahSpan"></span><br />


	验 证 码： <input type="text" size="4" name="yzm" id="yzm" οnblur="xyyzm();"/>

	<span id="getyzm" title="点击更换" οnclick="getyzm();"></span>

	<span id="yzmSpan" ></span><br />


	<input type="checkbox" id="isok" name="isok" οnclick="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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript基本的表单验证和正则表单验证

<script type="text/javascript">/*同意协议提交按钮可用*/ function ychecked(){ document.Myform.sub.disabled=!document.Myform.isok.checked; //disabled 属性规定应该禁用 input 元素。被禁用的 input 元素既不可用，也不可点击。 } /*页面加载出现验证码*/ function getyzm(){ var yzm=parseInt
复制链接

扫一扫