javascript 表单验证

最新推荐文章于 2024-09-14 18:52:56 发布

gonewit

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量407

点赞数 1

文章标签： javascript html form 表单验证

本文链接：https://blog.csdn.net/gonewit/article/details/39324511

版权

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>表单验证</title>
	<!-- 验证姓名 -->
	<script>
function nameFunction() {
 var x = document.getElementById("name").value;
 var y = /^[a-zA-Z\u4e00-\u9fa5]{1,}$/gi;
 if (!y.test(x)) {
  alert("姓名只能是中文或英文字母");
  return false;
 }
 else{
 	alert("验证通过")
 }
}
</script>

		<!-- 验证性别 -->
		<script>
function sexFunction() {
	// alert("nihao")
 var x = document.getElementById("sex").value;
 if (x=="female") {
  alert("性别为女");
 }
 else if (x=="male") {
 	alert("性别为男")
 }
 else{
 	alert("请选择正确性别")
 }
}
</script>


	<!-- 验证电话号码 -->
	<script>
	function telFunction()
	{
	var x=document.getElementById("tel").value;
	if(x==""||isNaN(x))
		{
		alert("电话号码只能是数字");
		return false;  
    }  
    //验证必须是11位  
    else if(x.length!=11)  
    {  
        alert("电话号码必须为11位数字!");  
        return false;  
    } 
    else{
    	alert("验证通过")
    }
	}
	</script>


	<!-- 验证邮箱 -->
	<script language="javascript" type="text/javascript" >  
/** 
 * Check email format 
 */  
function emailFunction(obj, labelName) {  
    var objName = eval("document.all."+obj);  
    var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.com)+/;  
    if (!pattern.test(objName.value)) {  
        alert("请输入正确的邮箱地址。");  
        objName.focus();
    }  else{
    	alert("验证通过")
    } 
}  
</script>
</head>






<body>
	<form action="" method="post">
        <label>姓名</label>
        <input type="text" name="name" id="name" οnblur="return nameFunction()" /> 
<!-- <button type="button" οnclick="nameFunction()">验证</button>  -->
        <br/>
        <br/>
        <label>性别</label>
        <!-- <input type="text" name="sex" id="sex" /> -->
        <select name="sex" id="sex" οnblur="return sexFunction()" >
			<option value="male">男</option>
			<option value="female">女</option>
		</select><!-- <button type="button" οnclick="sexFunction()">验证</button> -->
        <br/>
        <br/>
        <label>电话</label>
        <input type="text" name="tel" id="tel" οnblur="return telFunction()"/>
<!-- <button type="button" οnclick="telFunction()">验证</button> -->
        <br/>
        <br/>
        <label>邮箱</label>
        <input type="text" id="email" name="email" maxlength="30" οnblur="return emailFunction('email', 'email')"  />
        <br/>  
        <br/>
        <label>学历</label>
        <select name="sex">
			<option value="1">小学一年级</option>
			<option value="2">二年级</option>
			<option value="3">三年级</option>
			<option value="4">四年级</option>
			<option value="5">五年级</option>
			<option value="6">六年级</option>
			<option value="7">其他</option>
		</select>
        <p><button type="submit" class="btn">提交</button></p>
    </form>


</body>
</html>