Account login verification interface design
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的正则表达式</title>
</head>
<body>
<h1>JavaScript中的正则表达式在表单验证中的实例</h1>
<form action="jsworkSuccess.html" name="myform" onsubmit="return doSubmit()" method="post">
登陆账号：<input type="text" name="uname" onblur="checkUname()" />6~18位有效字符(字母、数字、下划线)<br/><br/>
登陆密码：<input type="text" name="upass" onblur="checkUpass()" />6~18位任意字符<br/><br/>
重复密码：<input type="text" name="upassAgain" onblur="checkUpassAgain()" />重复密码与登录密码一致<br/><br/>
性 别： <input type="radio" checked name="sex" name="sex" value="1" />男
<input type="radio" value="0" /> 女必须选择一个<br/><br/>
年 龄：<input type="text" name="uage" onblur="checkAge()" />大于0的任意两位整数<br/><br/>
手机号码：<input type="text" name="uphone" onblur="checkPhone()" />由1开头的11位整数<br/><br/>
邮 箱：<input type="text" name="uemail" onblur="checkEmail()"/><br/><br/>
学历: <select name="education" id="">
<option value="1">大专</option>
<option value="2" selected>本科</option>
<option value="3">硕士</option>
<option value="4">研究生</option>
<option value="5">博士</option>
</select>必须选择一个学历选项<br/><br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</body>
<script>
//验证账号函数
function checkUname(){
//获取账号信息
var uname = document.myform.uname.value;
//执行验证
//if(uname.match(/^[0-9A-Za-z_]{8,16}$/) == null){
if(uname.match(/^\w{
6,18}$/) == null){
alert("请输入6~18位的账号信息！");
return false;
}
return true;
}
//验证密码函数
function checkUpass(){
//获取密码信息
var upass = document.myform.upass.value;
//执行验证
if(upass.match(/^.{
6,18}$/) == null){
alert("请输入6~18位的密码！");
return false;
}
return true;
}
//验证密码是否一致函数函数
function checkUpassAgain(){
//获取第一次密码信息
var upass = document.myform.upass.value;
//获取第二次密码信息
var upassAgain = document.myform.upassAgain.value;
//执行验证
if(!(upass==upassAgain)){
alert("两次输入的密码不一致！");
return false;
}
return true;
}
//验证年龄函数
function checkAge(){
//获取账号信息
var uage = document.myform.uage.value;
//执行验证
if(uage.match(/[0-9]{
2}/) == true){
alert("请输入正确的年龄信息信息！");
return false;
}
return true;
}
//验证邮箱函数
function checkEmail(){
//获取账号信息
var uemail = document.myform.uemail.value;
//执行验证
if(uemail.match(/^\w+@\w+(\.\w+){
1,2}$/) == null){
alert("请输入正确的Email信息！");
return false;
}
return true;
}
//验证手机号码函数
function checkPhone(){
//获取账号信息
var uphone = document.myform.uphone.value;
//执行验证
if(uphone.match(/[0-9]{
11}/g) == true){
alert("请输入正确的手机号码信息！");
return false;
}
return true;
}
//表单提交
function doSubmit(){
return checkUname() && checkEmail() && checkUpassAgain() && checkAge() && checkEmail() && checkPhone();
}
</script>
</html>
Successful login interface:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的正则表达式</title>
</head>
<body>
<h1>提交成功!</h1>
</body>
</html>