`

JS客户端验证

阅读更多

demo1:

<html>
<head>
	<title>JavaScript中使用正则表达式</title>
	<script language="javascript">
		function validate(form){
			var num = form.number.value;
			if(!/^[0-9]*$/.test(num)){
				alert("输入的不是数字请重新输入数字");
				return false;
			}
			return true;
		}
	</script>
</head>
<body>
	<form action="aa" method="post" onSubmit="return validate(this)">
		输入数字:<input type="text" name="number"> 
		<input type="submit" value="提交">
	</form>
</body>
</html>

 

 

demo2:

<html>
<head>
	<title>JavaScript中使用正则表达式</title>
	<script language="javascript">
		//使用此函数截断字符串前后的空格
		function trim(str){
			return str.replace(/^\s*/,"").replace(/\s*$/,"");
		}
		
		
		function validate(form){
			//定义错误字符串
			var errors = "";
			
			//取出表单中的值并使用trim截断前后空格
			var username = trim(form.username.value);
			var password = trim(form.password.value);
			var repassword = trim(form.repassword.value);
			var age = trim(form.age.value);
			var birth = trim(form.birth.value);
			var email = trim(form.email.value);
			
			//判断用户名是否输入,如果输入了再判断格式是否正确
			if(username == "" || username == null){
				errors += "用户名必须输入";
			}else if(! /^\w{6,20}$/.test(username)) {
				errors += "\n用户名必须是字母和数字,长度为6到20之间"
			}
			
			//判断密码是否输入,如果输入了再判断格式是否正确
			if(password == "" || password == null){
				errors += "\n密码必须输入";
			}else if(! /^\w{6,20}$/.test(password)) {
				errors += "\n密码必须是字母和数字,长度为6到20之间"
			}

			//判断确认密码是否输入,如果输入了再判断格式是否正确
			if(repassword == "" || repassword == null){
				errors += "\n确认密码必须输入";
			}else if(! /^\w{6,20}$/.test(repassword)) {
				errors += "\n确认密码必须是字母和数字,长度为6到20之间"
			}

			//判断确认密码和密码是否相同
			if(repassword != password){
				errors += "\n确认密码和密码必须相同";
			}

			//年龄不是必须字段,只需要判断格式是否正确

			if(age != "" && !/^[0-1]?[0-9]?[0-9]$/.test(age)){
				errors += "\n请输入正确的年龄格式"
			}


			//出生日期不是必须字段,只需要判断格式是否正确
			if( birth != "" && !/^19\d\d\-[0-1]\d\-[0-3]\d$/.test(birth) && 
				!/^20[0-1]\d\-[0-1]\d\-[0-3]\d$/.test(birth)){
				errors += "\n请输入正确的生日格式(1988-03-31)"
			}

			//邮箱地址不是必须字段,只需要判断格式是否正确
			if(email != "" && !/^[a-zA-Z][a-zA-Z0-9._-]*@([a-zA-Z0-9-_]+.)+(com|gov|net|com.cn|edu.cn)$/.test(email)){
				errors += "\n请输入正确的邮箱地址"
			}

			if(errors == ""){
				return true;
			}else{
				alert(errors);
				return false;
			}
		}
	</script>
</head>
<body>
	<form action="aa" method="post" onSubmit="return validate(this)">
	<table>
		<tr>
			<td>用户名:</td>
			<td><input type="text" name="username"></td>
		</tr>
		<tr>
			<td>密码:</td>
			<td><input type="password" name="password"></td>
		</tr>
		<tr>
			<td>确认密码:</td>
			<td> <input type="password" name="repassword"></td>
		</tr>
		<tr>
			<td>年龄: </td>
			<td><input type="text" name="age"></td>
		</tr>
		<tr>
			<td>出生日期: </td>
			<td><input type="text" name="birth"></td>
		</tr>
		<tr>
			<td>邮箱地址:</td>
			<td><input type="text" name="email"></td>
		</tr>
		<tr>
			<td></td>
			<td><input type="submit" value="提交"></td>
		</tr>		
	</table>
	</form>
</body>
</html>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics