【HTML+CSS+JS】前台简单功能之====正则表达式的简单运用（校验数据是否合法）
界面效果如下：
代码如下：
math.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正则表达式</title>
<script type="text/javascript" src="../js/math.js"></script>
</head>
<body>
<header>用来校验数据是否合法</header>
<form>
<fieldset id="bi_tian">
<legend>必填：</legend>
<p class="wenzi">请输入用户名：</p>
<p><input type="text" name="userName" id="userName" placeholder="请输入账户名" maxlength="12" class="iner" onblur="return getBool_UserName()" autofocus/><span id="userName_check" class="Tishi"></span></p>
<p class="wenzi">请输入密码:</p>
<p><input type="password" name="password" id="password" maxlength="15" class="iner" onblur="return getBool_Password0()" /></p>
<p class="wenzi">请再出输入密码:</p>
<p><input type="password" name="passwordA" id="passwordA" maxlength="15" class="iner" onblur="return getBool_Password()" /><span id="passWord_check" class="Tishi"></span></p>
<p class="wenzi">请输入邮箱：</p>
<p><input type="text" id="email" name="email" class="iner" onblur="return getBool_Email()" /><span id="email_check" class="Tishi"></span></p>
<p class="wenzi">请输入电话号码：</p>
<p><input type="text" maxlength="11" class="iner" id="tel" onblur="getBool_Tel()" value=""/><span class="Tishi" id="tel_check"></span></p>
</fieldset>
<div>
<p><input type="button" value="校验" id="register" onclick="myRegister()" /><input type="reset" value="重置" id="reset" onclick="get_Reset()" /></p>
</div>
</form>
</body>
</html>
math.js
//全局变量
var bool_Email = false;
var bool_Password = false;
var bool_UserName = false;
var bool_Tel = false;
//登陆初始化
window.onload = function () {
var getElement_userName = document.getElementById("userName");
var getElement_password = document.getElementById("password");
var getElement_passwordA = document.getElementById("passwordA");
var getElement_Email = document.getElementById("email");
var getElement_Tel = document.getElementById("tel");
bool_Email = false;
bool_Password = false;
bool_Zhanghu = false;
bool_Tel = false;
getBool_UserName = '';
getBool_Password.value = '';
getElement_PasswordA.value = '';
getElement_Email.value = '';
getBool_Tel.value = '';
}
//判断用户框是否输入信息
function getBool_UserName() {
var getElement_userName = document.getElementById("userName");
var getElement_userName_check=document.getElementById("userName_check");
if (getElement_userName.value != '') {
bool_UserName = true;
getElement_userName_check.innerHTML="<font color=red></font>";
}
else {
bool_UserName = false;
getElement_userName_check.innerHTML="<font color=red>用户名不能为空</font>";
}
console.log(getBool_UserName.value);
return true;
}
//判断两个密码框的密码是否一致
function getBool_Password0() {
var getElement_password = document.getElementById("password");
var getElement_passwordA = document.getElementById("passwordA");
if (getElement_password.value == getElement_passwordA.value && getElement_password.value != '') {
bool_Password = true;
}
else {
bool_Password = false;
}
console.log(getBool_Password0.value);
return true;
}
//判断第二次密码是否错误
function getBool_Password() {
var getElement_Password = document.getElementById("password");
var getElement_PasswordA = document.getElementById("passwordA");
var getElement_password_check=document.getElementById("passWord_check");
if (getElement_Password.value == getElement_PasswordA.value && getElement_Password.value!='') {
bool_Password = true;
getElement_password_check.innerHTML="<font color=red></font>";
}
else {
bool_Password = false;
getElement_password_check.innerHTML="<font color=red>密码确认错误</font>";
}
console.log(getBool_Password.value);
return true;
}
//判断email输入格式是否正确
function getBool_Email() {
var getElement_email = document.getElementById("email");
var getElement_email_check=document.getElementById("email_check");
if (/^\w+@\w+.\w+$/.test(getElement_email.value)) {
bool_Email = true;
getElement_email_check.innerHTML="<font color=red></font>";
}
else {
bool_Email = false;
getElement_email_check.innerHTML="<font color=red>邮件格式错误</font>";
}
console.log(getBool_Email.value);
return true;
}
//判断电话是否为空
function getBool_Tel() {
var getElement_tel = document.getElementById("tel");
var getElement_tel_check = document.getElementById("tel_check");
if (getElement_tel.value != ''){
bool_Tel = true;
getElement_tel_check.innerHTML = "<font color=red></font>";
} else {
bool_Tel = false;
getElement_tel_check.innerHTML="<font color=red>电话不能为空</font>"
}
console.log(getBool_Tel.value);
return true;
}
//注册成功提示
function myRegister() {
var getElement_userName = document.getElementById("userName");
if(getElement_userName.value != '' && bool_Password == true && bool_Email ==true && bool_Tel == true){
alert("校验成功!");
}else{
alert("校验失败，请检查信息填写是否符合规则!");
}
}