标签：body char span charset == odi hone 手机 ima
现在输入经常通过ajax提交，所以我也没有直接写表单的验证。凡是输入其实都是可以验证的。说到验证，我们习惯于在输入之后马上就能返回结果，在这一点上ajax能有不错的效果。但是大部分验证并不需要通过数据库底层的操作，仅是对输入的数据做格式和字符上的限制。用ajax太大材小用了。我们这里给每个输入框一个onChange事件监听，当焦点移开输入框时立马能得到反馈
下面看代码
1、HTML代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="css/navigation.css"> <link rel="stylesheet" type="text/css" href="css/bottom.css"> <link rel="stylesheet" type="text/css" href="css/register.css"> <script type="text/javascript" src="script/jquery-3.2.1.js"></script> <script type="text/javascript" src="script/register.js"></script> <title>用户注册</title> </head> <script type="text/javascript"> </script> <body> <%@include file="common/navigation.jsp" %> <div id="mainId"> <div id="registerId"> <label class="registerHead">用户注册</label> <label for="usernameId">用户名</label> <input id="usernameId" type="text" name="username" onchange="checkUsername()"/> <br/> <span id="usernameTipId"></span> <br/> <label for="passwordId">密码</label> <input id="passwordId" type="password" name="password" onchange="checkPassword()"/> <br/> <span id="passwordTipId"></span> <br/> <label for="password2Id">密码确认</label> <input id="password2Id" type="password" name="password2" onchange="checkPassword2()"/> <br/> <span id="password2TipId"></span> <br/> <label for="e_mailId">邮箱</label> <input id="e_mailId" type="text" name="e_mail" onchange="checkEmail()"/> <br/> <span id="e_mailTipId"></span> <br/> <label for="phoneId">手机号码</label> <input id="phoneId" type="text" name="phone" onchange="checkPhone()"/> <br/> <span id="phoneTipId"></span> <br/> <input class="button" type="button" value="注册"/> <span id="loginLinkId"><a href="login.jsp">已有账号，速度登录--></a></span> </div> </div> <%@include file="common/bottom.jsp" %> </body> </html>
2、JS代码
function checkUsername() { var username = document.getElementById("usernameId").value; var usernameTip = document.getElementById("usernameTipId"); var nameRegex=/^[^@# ]{3,16}$/; if(username == "") { usernameTip.innerHTML="× 用户名不能为空，应为3-16个字符"; return false; } else if(!nameRegex.test(username)) { usernameTip.innerHTML="× 用户名为3~16个字符，且不能包含”@”、空格和”#”字符"; return false; }else { usernameTip.innerHTML="√ 用户名输入正确" return true; } } function checkPassword() { var password = document.getElementById("passwordId").value; var passwordTip = document.getElementById("passwordTipId"); var passwordRegex=/^[^@# ]{8,20}$/; if(password == "") { passwordTip.innerHTML=" × 密码不能为空"; return false; }else if(!passwordRegex.test(password)) { passwordTip.innerHTML="× 密码为8~20个字符，且不能包含”@”、空格和”#”字符"; return false; }else { passwordTip.innerHTML="√ 密码输入正确"; return true; } } function checkPassword2() { var password = document.getElementById("passwordId").value; var password2 = document.getElementById("password2Id").value; var password2Tip = document.getElementById("password2TipId"); if(password2 != password) { password2Tip.innerHTML=" × 两次密码输入不一致"; return false; }else { password2Tip.innerHTML=" √ 输入正确"; return true; } } function checkPhone() { var phone = document.getElementById("phoneId").value; var phoneTip = document.getElementById("phoneTipId"); var phoneRegex=/^1\d{10}$/; if(!phoneRegex.test(phone)) { phoneTip.innerHTML=" × 手机号码错误！"; return false; }else { phoneTip.innerHTML=" √ 输入正确"; return true; } } function checkEmail() { var e_mail = document.getElementById("e_mailId").value; var e_mailTip = document.getElementById("e_mailTipId"); var emailRegex=/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/; if(!emailRegex.test(e_mail)) { e_mailTip.innerHTML=" × 邮箱输入错误！"; return false; }else { e_mailTip.innerHTML=" √ 输入正确"; return true; } } function checkdata() { if(checkUsername()&&checkPassword()&&checkPassword2()&&checkPhone()&&checkEmail()) { return true; } else return false; }
下面是一些效果。页面用到的CSS文件我就不贴了
输入正确的例子
反面教材
标签：body char span charset == odi hone 手机 ima
原文地址：http://www.cnblogs.com/yeyeck/p/7434469.html
