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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值