正侧表达式实现输入框校验:
输入框要求如下:
用户名: 大写字母开头 6-20位字符(不允许有符号但是允许有_)
密码:大写开头 数字字母符号混合 8-15位
确认密码:大写开头 数字字母符号混合 8-15位
邮箱:邮箱格式
手机号:手机号格式
地址: 中文开头 数字 字母 中文混合
verify.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>输入框校验</title>
<script src="verify.js"></script>
</head>
<body>
用户名:<br/><input type="text" id="name"/><span id="nameReg"></span><br/>
密码:<br/><input type="text" id="pwd"/><span id="pwdReg"></span><br/>
确认密码:<br/><input type="text" id="pwd2"/><span id="pwd2Reg"></span><br/>
邮箱:<br/><input type="text" id="mailbox"/><span id="mailboxReg"></span><br/>
手机号:<br/><input type="text" id="phone"/><span id="phoneReg"></span><br/>
地址:<br/><input type="text" id="address"/><span id="addressReg"></span><br/>
<input type="button" value="校验" onclick="btnClick()"/>
<script type="text/javascript">
function btnClick(){
//用户名: 大写字母开头 6-20位字符(不允许有符号但是允许有_)
var limitierName = /^[A-Z]\w{5,19}$/;
reg("name",limitierName);
//密码:大写开头 数字字母符号混合 8-15位
var limitierPwd = /^[A-Z][\w\W]{7,14}$/;
reg("pwd",limitierPwd);
//确认密码:大写开头 数字字母符号混合 8-15位
var limitierPwd2 = /^[A-Z][\w\W]{7,14}$/;
reg("pwd2",limitierPwd2);
//邮箱:邮箱格式
var limitierMailbox = /^[A-z0-9]+@[a-z0-9]+.com$/;
reg("mailbox",limitierMailbox);
//手机号:手机号格式
var limitierPhone = /^(13|15|17|18)\d{9}$/;
reg("phone",limitierPhone);
//地址: 中文开头 数字 - 字母 中文混合
var limitierAddress = /^[\u4e00-\u9fa5][\u4e00-\u9fa5A-Za-z0-9]+$/;
reg("address",limitierAddress);
}
</script>
</body>
</html>
verify.js
/**
* Created by Administrator on 2019/10/12.
*/
/**
* 输入框的校验 消息显示区域的ID 必须按照 eleId+"Reg"
* @param eleId 输入框的ID
* @param rule 正则表达式
*/
function reg(eleId,rule){
var inputValue = document.getElementById(eleId).value;
var result = rule.test(inputValue.trim());
if(result){
document.getElementById(eleId+"Reg").innerHTML="√";
document.getElementById(eleId+"Reg").style.color= "green";
}else{
document.getElementById(eleId+"Reg").innerHTML="×";
document.getElementById(eleId+"Reg").style.color= "red";
}
}