表单验证

最新推荐文章于 2024-08-02 00:06:19 发布

原创最新推荐文章于 2024-08-02 00:06:19 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#表单验证

收藏专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body >
	<form action="" method="post" "return checkForm()">
		用户名：<input id="username" "checkName()" "this.value=jQuery.trim(this.value);" maxlength="16">
		密码：<input type="password" id="pwd" "checkPwd()" maxlength="16">
		手机号：<input type="tel" id="tel" "checkTel()" "justNumber(event)" maxlength="11" >
		<input type="submit" value="提交">
	</form>
 <script>
 	/*用户名校验*/
	function checkName(){
		var name = $("#username").val().trim();
		if(!name){
			alert("用户名不能为空");
			$("#username").focus();
			return false;
		}
		if(name.length<2||name.length>16){
			alert("用户名为2-16个字符");
			$("#username").focus();
			return false;
		}
		return true;
	}
 	/*密码校验*/
	function checkPwd(){
		var pwd = $("#pwd").val();
		if(!pwd){
			alert("密码不能为空");
			$("#pwd").focus();
			return false;
		}
		var pattern = /((?=.*[a-z])(?=.*\d)|(?=[a-z])(?=.*[#@!~%^&*_])|(?=.*\d)(?=.*[#@!~%^&*_]))[a-z\d#@!~%^&*_]{8,16}/i;
        if(!pattern.test(pwd)){
            alert("密码必须为8-16位字母和数字、下划线的组合");
			$("#pwd").focus();
            return false;
        }
		
		return true;
	}
	/*手机号校验*/
	function checkTel(){
		var tel = $("#tel").val();
		if(!tel){
			alert("手机号不能为空");
			$("#tel").focus();
			return false;
		}
		var telReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
		if(!telReg.test(tel)){
			alert("手机号格式有误");
			$("#tel").focus();
			return false;
		}
		return true;
	}
	/*只允许输入数字*/
	function justNumber(e){
		//获取键盘输入的keyCode
        var keycode = (Number)(e.keyCode);
        // 键盘上方数字键
        if(keycode >= 48 && keycode <= 57){
            e.returnValue = true;
        // 小数字键盘
        }else if(keycode >=96 && keycode <= 105){
            e.returnValue = true;
        // 删除键和delete
        }else if(keycode == 8 || keycode == 46){
            e.returnValue = true;
        // 除此之外，其他的不允许输入
        }else{
        	e.returnValue = false;
        }
	}
	/*表单提交校验*/
	function checkForm(){
		return checkName()&&checkPwd()&&checkTel();
	}
 </script>
</body>
</html>