JavaScript表单验证 #41
Description
本文重点：
- 学会使用JavaScript实现表单验证
- 会制做输入提示的特效
表单验证简介
表单验证是什么？
数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
表单验证必要性
- 减轻服务器的压力；
- 保证数据的可行性和安全性
网页上常见的验证形式和内容
- 形式
- 弹出框（层）提示
- 输入框周边有提示语句
- 内容
- 判断是否为空
- 判断是否为数字
- 判断是否符合某些特定的内容格式（邮箱、身份证等）
- 判断你输入的数据的长度
表单验证基本步骤与基本结构
- 点击提交按钮时会触发表单的 onsubmit 事件
- 在 onsubmit 事件中进行验证
- 获取表单元素的值
- 利用 DOM 方法获取需验证的表单元素的 value 值
- 根据业务规则，判断获取的数据是否符合要求
- 根据 String 对象的方法验证简单的数据
- 利用正则表达式方法验证复杂的数据
- 获取表单元素的值
- 所有需验证的表单元素通过后，才能提交表单
- 否则给出提示，并重复验证
附：String 对象常用属性和方法
| 类别 | 名称 | 说明 |
|---|---|---|
| 属性 | length | 返回字符串的长度（包括空格等） |
| 方法 | toLowerCase() |
把字符串转化为小写 |
| 方法 | toUpperCase() |
把字符串转化为大写 |
| 方法 | charAt(index) |
返回在指定位置的字符 |
| 方法 | indexOf(str，index) |
查找某个指定的字符串在字符串中首次出现的位置，str 为查找字符串，index 为查找的起始位置 |
| 方法 | substring(index1，index2) |
返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引 index2 对应的字符 |
表单验证基本结构-实例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JavaScript 表单验证基本结构</title>
<script type="text/javascript">
function checkform(){
// 1. 获取要验证的表单元素
var input = document.getElementById("username");
//2. 验证输入的内容（利用String对象的方法进行验证）
if (input.value == "" || input.value.length > 12) {
//3.弹出提示内容
alert("内容不能为空或长度不能超过12个字符");
return false; //返回验证结果
}
return true ; //返回验证结果
}
</script>
</head>
<body>
<form action="" method = "get" id = "myform" onsubmit = "return checkform()">
用户名：<input type = "text" name = "username" id = "username"/>
<br>
<input type = "submit" value = "提交"/>
</form>
</body>
</html>表单验证升级-实时提示
实例：
<!DOCTYPE html>
<html>
<head>
<title>验证登录页面</title>
</head>
<body>
<table>
<form action="" method="post" name="myform" onsubmit="return check()">
<tr>
<td> 账号：</td>
<td><input id="username" type="text"></td>
</tr>
<tr>
<td> 密码：</td>
<td><input id="pwd" type="password" /></td>
</tr>
<tr>
<td><input name="B1" type="submit" value="提交" class="submit"></td>
</tr>
</form>
</table>
<script type="text/javascript">
//定义一个函数，函数名叫 $ 。接收一个参数 pElementID （可随便命名为id、element、abc等），下面每个表单调用时返回 element 节点元素内容（表单元素的内容)。
//不用每次都使用变量获取表单元素，如： var input = document.getElementById("username"); 再进行验证。
function $(pElementID){
return document.getElementById(pElementID);
}
function check () {
var pUserName=$("username");
if ( pUserName.value == "" ) {
alert("请输入用户名！");
return false;
}
if (pUserName.value.length > 16 || pUserName.value.length < 4 ) {
alert("用户名必须为4-16位字符");
return false;
}
var pwd=$("pwd");
if(pwd.value==""){
alert("密码不能为空");
return false;
}
if(pwd.value.length<6){
alert("密码不能少于6位");
return false;
}
return true;
}
</script>
</body>
</html>-
上面这种提示框表单验证的缺点：
- 每次都要点击提交按钮才能验证输入内容是否符合要求；
- 每次都要去点击“确定”按钮关闭提示框，继续验证
-
如何实现用户填写用户名时，文本框即时提示效果？
- 文本框获取或者失去焦点时进行即时验证；
- 提示的信息在输入框附近显示
文本框对象
文本框对象、常用的属性、方法和事件
| 类别 | 名称 | 说明 |
|---|---|---|
| 属性 | id | 设置或返回文本域的 id |
| 属性 | value | 设置或返回文本域的 value 属性的值 |
| 方法 | blur() |
从文本域中移开焦点 |
| 方法 | focus() |
在文本域中设置焦点，即获得鼠标光标 |
| 方法 | select() |
选取文本域中的内容 |
| 事件 | onblur | 失去焦点，当光标离开某个文本框时触发 |
| 事件 | onfocus | 获得焦点，当光标进入某个文本框时触发 |
| 事件 | onkeypress | 某个键盘按键被按下时触发 |
- 升级验证网易通行证页面
- 当文本框获得焦点时，文本框变为红色并即时输入提示信息
- 失去焦点时，验证用户输入内容，并即时提示验证信息，用户输入正确，则文本框变为绿色
- 提交表单时，不符合的要求的文本框变为红色，并提示错误信息
<script type="text/javascript">
//获取DOM元素函数
function $(pElementID){
return document.getElementById(pElementID);
}
//更改DOM元素的class名称
function updateRed(obj){
var mObj=$(obj);
mObj.className="red";
}
// 给元素边框颜色为红色
function updateIntro(){
var intro=$("intro");
intro.style.borderColor="red";
}
//更改边框颜色为绿色
function checkIntro(){
var intro=$("intro");
intro.style.borderColor="#61b16a";
}
//验证用户函数
function checkUser(){
var userName=$("username");
var userMess=$("userMess");
userMess.innerHTML="";
if (userName.value == "" ) {
userMess.innerHTML="请输入用户名";
userName.className="red";
return false;
}else if (userName.value.length> 16 || userName.value.length< 4 ) {
userMess.innerHTML="用户名必须为4-16位字符，请重新填写";
userName.className="red";
return false;
}
userName.className="borSty";
return true;
}
//验证密码
function checkPwd(){
var pwd=$("pwd");
var pwdMess=$("pwdMess");
pwdMess.innerHTML = "";
if(pwd.value==""){
pwdMess.innerHTML="密码不能为空";
pwd.className="red";
return false;
}else if(pwd.value.length < 6){
pwdMess.innerHTML="密码不能少于6位";
pwd.className="red";
return false;
}
pwd.className="borSty";
return true;
}
//验证函数
function check () {
if(checkUser() && checkPwd()){
return true;
}
return false;
}
</script>- 目前为止，表单验证仍不够完善
- 只能对非空，是否包含某些字符进行校验
- 验证不足够准确
- 如何对用户名、手机、邮箱等作更为精确的校验呢？
- 请看下一篇：JavaScript_3 表单验证之正则表达式
- 附：基于 Bootstrap 、 jQuery 的表单验证插件 Bootstrap Validator： https://github.com/FatliTalk/bootstrapValidator