2021/11/1 前端开发之JavaScript+jQuery入门第十三章表单效验

公羊涛

2023-12-01

1.JavaScript验证表单内容

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;    //语句3

2）构造函数的方式

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");   //语句3

4.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);    //语句2

2)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").validity

validityState对象属性

属性	描述
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()方法，用于检测一个字符串是否匹配某个模式。
1. test():如果在字符串中含有匹配的文本，则返回true；否则返回false。
2. exec()：如果在字符串中含有匹配的文本，则返回匹配的结果；否则返回null。
HTML5新增表单验证属性：placeholder丶required和pattern。
HTML5提供了用于反馈验证状态的ValidityState对象。

练习小作业：

使用JavaScript验证用户注册页面
使用正则表达式验证居民身份证号码
使用正则表达式验证用户注册界面
使用HTML5方式验证用户注册界面

2021/11/1 前端开发之JavaScript+jQuery入门第十三章表单效验

1.JavaScript验证表单内容

2.表单选择器

3.表单属性过滤选择器

4.正则表达式

4.1 正则表达式的定义

4.2 表达式规则

4.3 正则表达式的使用方式

5.HTML5表单验证

5.2 validity属性应用

本章总结

相关阅读

相关文章

相关问答

相关文档

2021/11/1 前端开发之JavaScript+jQuery入门 第十三章表单效验

1.JavaScript验证表单内容

2.表单选择器

3.表单属性过滤选择器

4.正则表达式

4.1 正则表达式的定义

4.2 表达式规则

4.3 正则表达式的使用方式

5.HTML5表单验证

5.2 validity属性应用

本章总结

相关阅读

相关文章

相关问答

相关文档

2021/11/1 前端开发之JavaScript+jQuery入门第十三章表单效验