题目:写一个用于登录的表单,包含用户名、密码和手机号码。提交数据的时候,要求验证:
1. 用户名必须输入汉字;
2. 密码总共6位,前2位为字母,后4位为数字;
3. 手机号码符合中国大陆手机号码格式
如果输入错误,则在输入框后面显示对应的文本提示信息
代码如下:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
// 1.当失去焦点时,用户名校验函数
function checkUserName(){
// 1.1 获取到usernameID对应的input元素节点和username对应的校验span元素节点
var usernameNode = document.getElementById("usernameID");
var usernameCheckNode = document.getElementById("usernameCheckID");
// 1.2 定义校验正则
var usernameReg = /^[\u4e00-\u9fa5]+$/ig;
// 1.3 获取到username元素节点的value属性值
var usernameValue = usernameNode.value;
// 1.4 判断value属性值是否匹配正则并进行相关处理
if (usernameReg.test(usernameValue)) {
usernameCheckNode.innerText = "用户名输入成功!"; //当用户名输入成功时候的校验结果
usernameCheckNode.style.color = "green";
return true;
} else{
usernameCheckNode.innerText = "用户名输入失败!请输入中文用户名"; //当用户名输入失败时候的校验结果
usernameCheckNode.style.color = "red";
return false;
}
}
// 2.当失去焦点时,密码校验函数
function checkPassword(){
// 2.1 获取到passwordID对应的input元素节点和password对应的校验span元素节点
var passwordNode = document.getElementById("passwordID");
var passwordCheckNode = document.getElementById("passwordCheckID");
// 2.2 定义校验正则
var passwordReg = new RegExp("^[a-zA-Z]{2}[0-9]{4}$","ig");
// 2.3 获取到password元素节点的value属性值
var passwordValue = passwordNode.value;
// 2.4 判断value属性值是否匹配正则并进行相关处理
if (passwordReg.test(passwordValue)) {
passwordCheckNode.innerText = "密码输入成功!"; //当密码输入成功时候的校验结果
passwordCheckNode.style.color = "green";
return true;
} else{
passwordCheckNode.innerText = "密码输入失败!密码为6位,前两位为英文字母,后四位为数字"; //当密码输入失败时候的校验结果
passwordCheckNode.style.color = "red";
return false;
}
}
// 3.当失去焦点时,手机号校验函数
function checkPhoneNumber(){
// 3.1 获取到phoneID对应的input元素节点和phoneNumber对应的校验span元素节点
var phoneNode = document.getElementById("phoneID");
var phoneCheckNode = document.getElementById("phoneCheckId");
// 3.2 定义校验正则
var phoneReg = /^1[0-9]{10}$/ig;
// 3.3 获取到phoneNumber元素节点的value属性值
var phoneValue = phoneNode.value;
// 3.4 判断value属性值是否匹配正则并进行相关处理
if (phoneReg.test(phoneValue)) {
phoneCheckNode.innerText = "手机号输入成功!"; //当手机号输入成功时候的校验结果
phoneCheckNode.style.color = "green";
return true;
} else{
phoneCheckNode.innerText = "手机号输入失败!请输入中国大陆手机号码"; //当手机号输入失败时候的校验结果
phoneCheckNode.style.color = "red";
return false;
}
}
// 4.定义整体提交数据校验函数
function checkInput(){
if (checkUserName() && checkPassword() && checkPhoneNumber()) {
alert("恭喜注册成功!");
return true;
} else{
return false;
}
}
</script>
<body>
<form id="loginID" name="login" action="submit.html" method="get" onsubmit="return checkInput()">
用户名:<input type="text" id="usernameID" name="username" placeholder="请输入中文用户名" onblur="checkUserName()"/>
<span id="usernameCheckID"></span> <br />
密码:<input type="password" id="passwordID" name="password" placeholder="密码为6位,前两位为英文字母,后四位为数字" onblur="checkPassword()"/>
<span id="passwordCheckID"></span> <br />
手机号码:<input type="text" id="phoneID" name="phoneNumber" placeholder="请输入中国大陆手机号" onblur="checkPhoneNumber()"/>
<span id="phoneCheckId"></span>
<br />
<input type="submit" name="submit"/>
<input type="reset"/>
</form>
</body>
</html>
第一次在博客写东西,可能有很多写得不对的地方,欢迎点评~