<!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>
表单验证
最新推荐文章于 2024-04-16 11:57:14 发布