目录
1.JavaScript验证表单内容
- 获取到需要效验内容合法性的表单元素值。
- 使用JavaScript提供的方法对表单元素的值进行判断。
- 根据判断结果，针对不合法的数据给出提示信息。
2.表单选择器
| 语法 | 描述 | 返回值 |
| :input | 匹配所有input，textarea，select和button元素 | 元素集合 |
| :text | 匹配所有的单行文本框 | 元素集合 |
| :password | 匹配所有密码框 | 元素集合 |
| :radio | 匹配所有单选按钮 | 元素集合 |
| :checkbox | 匹配所有复选框 | 元素集合 |
| :submit | 匹配所有提交按钮 | 元素集合 |
| :reset | 匹配许所有重置按钮 | 元素集合 |
| :button | 匹配所有按钮 | 元素集合 |
| :image | 匹配所有文件域 | 元素集合 |
| :file | 匹配所有文件域 | 元素集合 |
3.表单属性过滤选择器
| 语法 | 描述 | 返回值 |
| :enabled | 匹配所有可用元素 | 元素集合 |
| :disabled | 匹配所有不可元素 | 元素集合 |
| :checked | 匹配所有被选中元素(复选框，单选按钮，下拉列表) | 元素集合 |
| :selected | 匹配select所选中的option元素 | 元素集合 |
示例：使用jQuery进行邮箱验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.js"></script>
</head>
<body>
<form action="" method="get">
邮箱：<input type="text"/>
</form>
</body>
<script>
$(function () {
$(":text").blur(function () { //当输入框失去焦点时
var str=$(this).val();
if (str==null||str==''){
alert("为空！")
}else if (!(str.indexOf("@")<str.indexOf(".")&&str.indexOf("@")>0)){
alert("不合法！")
}
})
})
</script>
</html>4.正则表达式
正则表达式(Regular Expression)，又称规则表达式，是对字符串执行模式匹配的强大工具。匹配模式，可以分为简单模式和复杂模式。简单模式可以是一个单独的字符串；复杂模式则包括更多的字符，如验证手机号码丶身份证号码等字符串。且正则表达式所有语言通用。
4.1 正则表达式的定义
定义正则表达式有两种构造形式：一种是普通方式，另一种是构造函数的方式。
1）普通方式
var reg=/表达式规则/附加参数其中表达式规则为一个字符串，用于描述正则表达式的搜索模式，附加参数为可选项，用于扩展表达式的含义，可接收以下参数:
- g:表示可以进行全局匹配，默认为非全局匹配，只匹配第一个符合要求的字符串
- i:表示不区分大小写匹配
- m:表示可以进行多行匹配
上面三个参数可以任意组合，叠加使用。
var reg=/pink/; //语句1
var reg=/pink/g; //语句2
var reg=/pink/gi; //语句32）构造函数的方式
RegExp对象是Regular Expressio(正则表达式)的缩写。
var reg=new RegExp('表达式规则','附加参数');
var reg=new RegExp("pink"); //语句1
var reg=new RegExp("pink","g"); //语句2
var reg=new RegExp("pink","gi"); //语句34.2 表达式规则
正则表达式由普通字符和一些元字符(metacharacters)组成。普通字符包括大小写的字母和数字，元字符则具有特殊的含义；普通字符和元字符可以单一使用，也可以任意组合。
正则表达式中常用的元字符
| 元字符 | 描述 |
| /.../ | 代表一个模式的开始和结束 |
| ^ | 匹配字符串开始的位置 |
| $ | 匹配字符串结束的位置 |
| \s | 任何空白字符 |
| \S | 任何非空白字符 |
| \d | 匹配一个数字字符，等价于[0-9] |
| \D | 除了数字之外的任何字符，等价于*[^0-9] |
| \w | 匹配一个数字、下划线或字母字符，等价于****[A-Za-z0-9_] |
| \W | 任何非单字字符，等价于*[^a-zA-z0-9_] |
| . | 除了换行符之外的任意字符 |
| {n} | 匹配前一项n次 |
| {n,} | 匹配前一项n次，或者多次 |
| {n,m} | 匹配前一项至少n次，但是不能超过m次。其中n和m均为非负整数，n<=m |
| * | 匹配前一项0次或多次，等价于{0,} |
| + | 匹配前一项1次或多次，等价于{1,} |
| ？ | 匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1} |
| [] | 定义匹配的字符串 |
| () | 用于提取匹配的字符串，表达式中有几个()就有几个相应匹配字符串 |
| {} | 用于匹配长度 |
| | | 或者 |
4.3 正则表达式的使用方式
在页面中使用正则表达式有两种方式：一种是使用RegExp对象提供的方法，另一种是使用String对象提供的方法。
1)RegExp对象的方法
| 方法 | 描述 |
| test(String) | 用于检索一个字符串是否匹配某个模式。如果在字符串含有匹配的文本，则返回true；否则返回false |
| exec(String) | 用于检索一个字符串是否匹配某个模式。如果在字符串含有匹配的文本，则返回匹配的结果；否则返回null |
var str="amy like pink";
var reg=/pink/;
var result=reg.test(str); //语句1
var result1=reg.exec(str); //语句22)String对象的方法
| 方法 | 描述 |
| match(RegExp) | 检索字符串中一个或多个正则表达式匹配的值，返回一个存放匹配结果的数组 |
| search(RegExp) | 检索字符串中第一个与正则表达式相匹配的字符串的起始位置 |
| replace(RegExp/String,replacement) | 替换与正则表达式匹配的字符串 |
| split(separator,n) | 以separator为边界，将字符串分割为字符串数组，n为限制输出数组的个数 |
var str="amy like pink";
var reg=/pink/;
var result1=str.match(reg); //语句1
var result2=str.search(str); //语句2
var result3=str.replace(reg,"red"); //语句3
var str1="red,pink,blue,white";
var result4=str1.split(',',2) //语句4
//变量result1的值为"pink"。
//变量result2的值为"9"。
//变量result3的值为"amy like red"。
//变量result4的值为"red,pink"。
示例：正则表达式的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.js"></script>
</head>
<body>
手机号：<input type="text" id="sjh"/></br>
邮箱：<input type="text" id="yx"/></br>
年龄1~150之间：<input type="text" id="nl"/></br>
</body>
<script>
//正则表达式是所有语言都可以用的公共语言
//验证手机号
$(function () {
$("#sjh").blur(function () {
var reg=/^138\d{8}$/;
var str=$(this).val();
alert(reg.test(str));
});
//验证邮箱
$("#yx").blur(function () {
var rag=/^\w{6,12}@[0-9a-zA-Z]{2,6}\.[a-zA-Z]{4,6}$/;
var str=$(this).val();
alert(rag.test(str));
});
//验证年龄为0~150岁之间
$("#nl").blur(function () {
var rcg=/^[1-9]$|^[1-9]\d$|^1[0-4][0-9]$|^150$/;
var c=$(this).val();
alert(rcg.test(c))
});
});
</script>
</html>5.HTML5表单验证
HTML5表单验证属性
| 属性 | 描述 |
| placeholder | 提供一种提示（hint），描述输入域所期待的值，当输入域为空丶失去焦点，提示（hint）出现； 当输入域获得焦点时，提示（hint）消失 |
| required | 规定输入域不能为空 |
| pattern | 规定用于验证输入域的正则表达式 |
5.2 validity属性应用
当表单元素添加验证属性required和pattern后，可以通过HTML5提供的validityState对象获取当前验证属性的验证状态
语法：
var validityState=document.getElementById("user").validityvalidityState对象属性
| 属性 | 描述 |
| valueMissing | 当表单元素设置required属性后，如果表单的值为空，则无法通过表单验证， 返回true；否则，返回false |
| typeMismatch | 当用户输入的内容与表单类型不匹配时，返回true；否则，返回false |
| patternMismatch | 当用户输入的内容与表单元素patterm特性的正则不匹配时， 返回true;否则，返回false |
| tooLong | 当用户输入的内容超过了表单元素maxLength特性限定的字符长度时， 返回true;否则，返回false |
| rangeUnderflow | 当用户输入的值小于min特性的值时，返回true；否则，返回false |
| rangeOverflow | 当用户输入的值大于max特性的值时，返回true; 否则，返回false |
| stepMismatch | 当用户输入的值不符合step特性所推算的规则时，返回true; 否则，返回false |
| customError | 使用自定义的验证错误提示信息时，当存在自定义错误信息时， 返回true: 否则，返回false |
示例:使用HTML5方式验证用户注册页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>注册页面</title>
<link href="./css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js"></script>
</head>
<body class="body">
<div class="warp">
<form>
<div class="form" id="form" name="myform" action="#" method="get">
<div class="form-title">
<span>注册账号</span>
</div>
<div class="form-main">
<div class="form-list">
<span>昵称</span>
<div class="form-text">
<input type="text" id="user" required
placeholder="昵称不能为空,只能由英文字母丶数字和下划线组成,长度为6~15个字符"
pattern="^\w{6,15}$"/>
</div>
<b id="user_msg"></b>
</div>
<div class="form-list">
<span>邮箱</span>
<div class="form-text">
<input type="text" id="email" required
placeholder="请输入正确的邮箱格式"
pattern="^\w{1,}['@']['.']$"/>
</div>
<b id="email_msg"></b>
</div>
<div class="form-list">
<span>密码</span>
<div class="form-text">
<input type="password" id="password" required
placeholder="密码不能为空,只能由英文字母丶数字和下划线组成,长度为8~16个字符"
pattern="^\w{8,16}$"/>
</div>
<b id="password_msg"></b>
</div>
<div class="form-list">
<span>再次密码</span>
<div class="form-text">
<input type="password" id="password1" required
placeholder="密码不能为空,只能由英文字母丶数字和下划线组成,长度为8~16个字符"
pattern="^\w{8,16}$"/>
</div>
<b id="password1_msg"></b>
</div>
<div class="form-list gender">
<span>性别</span>
<div class="form-text">
<label><input type="radio" value="男" name="gender" checked> 男</label>
<label><input type="radio" value="女" name="gender"> 女</label>
</div>
</div>
<div class="form-list">
<span>生日</span>
<div class="form-text">
<select>
<option>2021年</option>
</select>
<select>
<option>1月</option>
</select>
<select>
<option>22日</option>
</select>
</div>
</div>
<div class="form-list">
<span>爱好</span>
<div>
<div class="ortherinput">
<input type="checkbox" />读书
<input type="checkbox" />编程
<input type="checkbox" />运动
</div>
</div>
</div>
<div class="form-list">
<span>头像</span>
<div>
<div class="ortherinput">
<input type="image" src="images/default.jpg" width="90px" height="80px" />
<input type="file" />
</div>
</div>
</div>
<div class="form-list">
<span>所在地</span>
<div class="form-text">
<select>
<option>河北省</option>
</select>
<select>
<option>秦皇岛市</option>
</select>
<select>
<option>北戴河区</option>
</select>
</div>
</div>
<div class="form-list">
<span>手机号</span>
<div class="form-text">
<input type="text" id="mobile" required
placeholder="手机号码不能为空,且长度要求为11位,号段只能以13丶14丶15丶18开头"
pattern="^13\d{9}$|^14\d{9}$|^15\d{9}$|^18\d{9}$"/>
</div>
<b id="mobile_msg"></b>
</div>
<div class="prompt">
<p>可通过该手机号码快速找回密码</p>
<p> 中国大陆地区以外手机号码 <a href="javascript:void(0);" id="showcode"> 点击这里</a></p>
</div>
<div class="code">
<input type="text" /><span>获取短信验证码</span>
</div>
<div class="submit">
<input type="submit" id="submit" value="注册" />
<input type="reset" id="reset" value="重置" />
</div>
<div class="deal">
<p><label><input type="checkbox" class="acc" id="deal" checked />我已阅读并同意相关服务条款和隐私政策</label> </p>
<span></span>
<div class="deal-list">
<a href="#">《账户规则》</a>
<a href="#">《服务协议》</a>
<a href="#">《隐私政策》</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
<script>
var yx=document.getElementById("email"); //获取邮箱
var nc=document.getElementById("user") //获取昵称
var pwd=document.getElementById("password") //密码
var pwd1=document.getElementById("password1") //再次密码
var phone=document.getElementById("mobile")//手机号
$("#submit").click(function () {
//昵称验证
if(nc.validity.valueMissing==true){
nc.setCustomValidity("昵称不能为空")
}else if(nc.validity.patternMismatch==true){
nc.setCustomValidity("昵称格式不正确")
}else{
nc.setCustomValidity("")
}
//邮箱验证
if(yx.validity.valueMissing==true){
yx.setCustomValidity("邮箱不能为空")
}else if(yx.validity.patternMismatch==true){
yx.setCustomValidity("邮箱格式不正确")
}else{
yx.setCustomValidity("")
}
//密码验证
if(pwd.validity.valueMissing==true){
pwd.setCustomValidity("密码不能为空")
}else if(pwd.validity.patternMismatch==true){
pwd.setCustomValidity("密码格式不正确")
}else{
pwd.setCustomValidity("")
}
//再次密码验证
if(pwd1.validity.valueMissing==true){
pwd1.setCustomValidity("再次密码不能为空")
}else if(pwd1.validity.patternMismatch==true){
pwd1.setCustomValidity("再次密码格式不正确")
}else{
pwd1.setCustomValidity("")
}
//手机号验证
if(phone.validity.valueMissing==true){
phone.setCustomValidity("手机号不能为空")
}else if(phone.validity.patternMismatch==true){
phone.setCustomValidity("手机号格式不正确")
}else{
phone.setCustomValidity("")
}
//两次密码验证
var pwd3=pwd.value;
var pwd4=pwd1.value;
if(!(pwd4==pwd3)){
pwd1.setCustomValidity("两次密码不一致")
}
})
</script>
</html>本章总结
- 客户端数据效验常用的三种方式：JavaScript验证表单内容丶正则表达式验证和HTML5表单验证。
- HTML5表单验证属性结合正则表达式进行表单内容合法性的效验，是目前客户端效验中，最为准确的丶应用频次较高的一种效验方式。
- jQuery提供专用于选取表单元素的选择器：表单选择器和表单属性过滤选择器。
- 定义正则表达式有两种构造形式：一种是普通方式，另一种是构造函数的方式。
- Reg对象提供了test()和exec()方法，用于检测一个字符串是否匹配某个模式。
- test():如果在字符串中含有匹配的文本，则返回true；否则返回false。
- exec()：如果在字符串中含有匹配的文本，则返回匹配的结果；否则返回null。
- HTML5新增表单验证属性：placeholder丶required和pattern。
- HTML5提供了用于反馈验证状态的ValidityState对象。
练习小作业：
- 使用JavaScript验证用户注册页面
- 使用正则表达式验证居民身份证号码
- 使用正则表达式验证用户注册界面
- 使用HTML5方式验证用户注册界面
437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
