JavaScript学习笔记（二）：登陆验证（简单、表单），约束验证 DOM 方法（checkValidity()、setCustomValidity()）

深藏阁楼爱情的钟 2022-03-26 08:23 233阅读 0赞

## ##

## **登陆信息验证** ##

当你在某些平台进行登陆或者注册操作是都会有信息的一个验证，没有填、漏填、错填信息等操作页面都会有一个信息的提示，“请填入信息”，“你的账号或密码填写错误”等提示信息，开发人员统称为用户操作异常。在开发时需要考虑到用户异常的操作，不给操作放行，并提示给用户相应的异常信息。这里通过“登陆简单验证”和"登陆表单验证"两个小案例演示异常的处理。

### **小案例：登陆简单验证** ###

**工作原理：**

1.通过 document.getElementById("").value 获得信息输入的内容。

2.使用 try\{...\}...catch()\{...\} 做异常处理，这里通过 throw 抛出自定义的异常信息。

3.通过 document.getElementById("").innerHTML 把异常信息写入到页面中。

**展示页面：**

一个账号输入框，一个密码输入框和一个登陆按钮。

通过登陆按钮点击事件调用js脚本执行登陆操作。

如果有错误提示将写入p标签中。

<html>
     <head></head>
     <body>
      <p>登陆验证</p> 
      账号：<input id="num" type="text" name="username" /><br /> 
      密码：<input id="pas" type="password" name="password" /><br /> 
      <p id="p"></p> 
      <button onclick="Login()" type="button" style="height: 40px; width: 100px; color: black; font-size: 12px;">登陆</button>
     </body>
    </html>

**js编写：**

isNaN()：函数用于检查其参数是否是非数字值。

如果 x 是特殊的非数字值 NaN，返回的值就是 true。如果 x 是其他值，则返回 false。

**异常信息提示的几种方式：**

1.弹出警告框。alert(err);  
2.写到 HTML 文档中。document.write(err);  
3.写入到 HTML 元素。document.getElementById("p").innerHTML = err;  
4.写入到浏览器的控制台。console.log(err);

**这里用到的正则表达式：**

/(^\\s\*)|(\\s\*$)/g,"" ，替换输入框中的连续空格字符

'g'，全局匹配.  
 'i'，对大小写不敏感的匹配。  
 'm'，多行匹配。

/*登陆验证*/
    function Login() {
        /*获得账号输入框的内容*/
        var Element = document.getElementById("num").value;
        /*获得密码输入内容*/
        var pasElement = document.getElementById("pas").value;
        /*输入的空格，或者连续空格,正则 
    			'g':全局匹配.
    			'i':对大小写不敏感的匹配。
    			'm':多行匹配。
    		*/
        try {
    
            if (Element == null || Element.replace(/(^\s*)|(\s*$)/g, "") == "" || pasElement == null || pasElement.replace(/(^\s*)|(\s*$)/g, "") == "") {
                throw "账号或密码不能为空或者空格！";
            } else if (isNaN(Element)) {
                throw "账号只能是数字！";
            } else if (Element.length < 8 || pasElement.length < 6) {
                throw "账号最小长度为8,密码的最小长度为6！";
            } else {
                document.getElementById("p").innerHTML = "登陆成功！";
            }
        } catch(err) {
            // 1.弹出警告框。
            /*alert(err);*/
            // 2.写到 HTML 文档中。
            /*document.write(err);*/
            // 3.写入到 HTML 元素。
            document.getElementById("p").innerHTML = err;
            // 4.写入到浏览器的控制台。
            /*console.log(err);*/
        }
    
    }

### **小案例：登陆表单验证** ###

**工作原理：**

1.通过 document.forms\[""\]\[""\].value 获得指定表单中输入框的信息内容。

2.检查邮箱输入的数据是否符合电子邮件地址的基本语法。

3.使用 try\{...\}...catch()\{...\} 做异常处理，这里通过 throw 抛出自定义的异常信息。

4.通过 document.getElementById("").innerHTML 把异常信息写入到页面中。

**展示页面：**

from标签中主要包含表单命名（name），提交（onsubmit），提交方式（method）属性。

return LoginValidate();提交函数 LoginValidate() 的返回结果，true放行，false不放行。

输入框中的 required="required" 属性：输入框必须输入字符。

<html>
     <head></head>
     <body>
      <p>登陆表单验证</p> 
      <form name="LoginForm" action="" onsubmit="return LoginValidate();" method="post"> 
       <p id="msg"></p> 
       账号：<input id="username" type="text" name="username" required="required" /><br />  
       密码：<input id="password" type="password" name="password" required="required" /><br /> 
       邮箱：<input id="email" type="text" name="E-mail" required="required" /><br /> 
       <input type="submit" value="登陆" style="height: 40px; width: 100px; color: black; font-size: 12px;" /> 
      </form>
     </body>
    </html>

**js编写：**

注意检查邮箱输入的数据是否符合电子邮件地址的基本语法：

1.必须包含 @ 符号和点号(.)，atpos = email.indexOf("@") >= 1

2.@ 不可以是邮件地址的首字符，dotpos = email.lastIndexOf(".") >= atpos + 2

3.@ 之后需有至少一个点号，dotpos + 2 < email.length

/*登陆表单验证*/
    function LoginValidate() {
        /*获得账号输入框的内容*/
        var username = document.forms["LoginForm"]["username"].value;
        /*获得密码输入内容*/
        var password = document.forms["LoginForm"]["password"].value;
        /*验证邮箱*/
        var email = document.forms["LoginForm"]["email"].value;
        /*必须包含 @ 符号和点号(.)*/
        var atpos = email.indexOf("@");
        var dotpos = email.lastIndexOf(".");
    
        try {
            if (isNaN(username)) {
                throw "账号只能是数字！";
            } else if (username.length < 8) {
                throw "账号最小长度为8！";
            } else if (password.length < 6) {
                throw "密码的最小长度为6！";
            } else if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
                // 必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号
                throw "不是一个有效的Email地址！";
            } else {
                document.getElementById("msg").innerHTML = "登陆成功！";
                return true;
            }
        } catch(err) {
            // 3.写入到 HTML 元素。
            document.getElementById("msg").innerHTML = err;
            return false;
        }
    
    }

# #

## 约束验证 DOM ##

**方法：**

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;width:146px;"><strong><span style="color:#3399ea;">方法</span></strong></td> 
   <td style="text-align:center;vertical-align:middle;"><strong><span style="color:#3399ea;">描述</span></strong></td> 
  </tr> 
  <tr> 
   <td style="width:146px;">checkValidity()</td> 
   <td>如果 input 元素中的数据是合法的返回 true，否则返回 false。</td> 
  </tr> 
  <tr> 
   <td style="width:146px;">setCustomValidity()</td> 
   <td> <p>设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。</p> <p>使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下：</p> <p>&nbsp;</p> <p>1. setCustomValidity('')</p> <p>2. setCustomValidity(null)</p> <p>3. setCustomValidity(undefined)</p> <p>&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

**属性：**

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;width:145px;"><strong><span style="color:#3399ea;">方法</span></strong></td> 
   <td style="text-align:center;vertical-align:middle;"><strong><span style="color:#3399ea;">描述</span></strong></td> 
  </tr> 
  <tr> 
   <td style="width:145px;">validity</td> 
   <td>布尔属性值，返回 input 输入值是否合法</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">validationMessage</td> 
   <td>浏览器错误提示信息</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">willValidate</td> 
   <td>指定 input 是否需要验证</td> 
  </tr> 
 </tbody> 
</table>

**Validity 属性：**

<table> 
 <tbody> 
  <tr> 
   <th style="text-align:center;vertical-align:middle;width:146px;"><strong><span style="color:#3399ea;">属性</span></strong></th> 
   <th style="text-align:center;vertical-align:middle;"><strong><span style="color:#3399ea;">描述</span></strong></th> 
  </tr> 
  <tr> 
   <td style="width:146px;">customError</td> 
   <td>设置为 true, 如果设置了自定义的 validity 信息。</td> 
  </tr> 
  <tr> 
   <td style="width:146px;">patternMismatch</td> 
   <td>设置为 true, 如果元素的值不匹配它的模式属性。</td> 
  </tr> 
  <tr> 
   <td style="width:146px;">rangeOverflow</td> 
   <td>设置为 true, 如果元素的值大于设置的最大值。</td> 
  </tr> 
  <tr> 
   <td style="width:146px;">rangeUnderflow</td> 
   <td>设置为 true, 如果元素的值小于它的最小值。</td> 
  </tr> 
  <tr> 
   <td style="width:146px;">stepMismatch</td> 
   <td>设置为 true, 如果元素的值不是按照规定的 step 属性设置。</td> 
  </tr> 
  <tr> 
   <td style="width:146px;">tooLong</td> 
   <td>设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。</td> 
  </tr> 
  <tr> 
   <td style="width:146px;">typeMismatch</td> 
   <td>设置为 true, 如果元素的值不是预期相匹配的类型。</td> 
  </tr> 
  <tr> 
   <td style="width:146px;">valueMissing</td> 
   <td>设置为 true，如果元素 (required 属性) 没有值。</td> 
  </tr> 
  <tr> 
   <td style="width:146px;">valid</td> 
   <td>设置为 true，如果元素的值是合法的。</td> 
  </tr> 
 </tbody> 
</table>

**小案例：简单转账**

**1. checkValidity() 方法验证**

type="number"：输入只能是数字

required =”“：方法需要 required 属性

min="1": 输入最小值为1

max=”200000“：输入最大值为200000

**2.setCustomValidity()方法验证**

type="number"：输入只能是数字

min="1": 输入最小值为1

max=”200000“：输入最大值为200000

**展示页面：**

**js编写：**

**1.checkValidity()方法**

根据函数返回的true或者false，用 validationMessage 属性把默认的提示信息显示到页面。

**2.setCustomValidity()方法**

先取消默认的提示信息，通过 setCustomValidity('') 设置自定义提示信息。这里用到了Validity 属性最小值（rangeUnderflow）和最大值（rangeOverflow）验证。

/*约束验证 DOM 方法*/
    function LoginCheckValidity() {
        var txt = "";
    
        /*1.checkValidity() 方法验证*/
        var rmb1 = document.getElementById("rmb1"); // 获得账号输入框的内容
        if (rmb1.checkValidity() == false) {
            txt = rmb1.validationMessage;
        } else {
            txt = "转账成功！";
        }
        document.getElementById("rmb1msg").innerHTML = txt;
    
        /*2.setCustomValidity()方法验证*/
        var rmb2 = document.getElementById("rmb2"); // 获得金额输入框的内容
        rmb2.setCustomValidity(""); // 取消自定义提示的方式
        if (rmb2.value == null || rmb2.value == "") {
            rmb2.setCustomValidity("请输入金额！");
        } else if (rmb2.validity.rangeUnderflow) {
            rmb2.setCustomValidity("金额不小于1元！");
        } else if (rmb2.validity.rangeOverflow) {
            rmb2.setCustomValidity("金额不大于200000万！");
        } else {
            rmb2.setCustomValidity("转账成功！");
        }
        document.getElementById("rmb2msg").innerHTML = rmb2.validationMessage;
    
    }

两种方法都没有输入金额或者输入非数字时的提示对比：

![20190116164456218.png][]          ![20190116164920609.png][]

两种方法都输入金额小于min时的提示对比：

![20190116164622354.png][]

两种方法都输入金额大于max时的提示对比：

![20190116164714797.png][]

两种方法都输入金额正确时的提示对比：

![2019011616483944.png][]

[20190116164456218.png]: https://img-blog.csdnimg.cn/20190116164456218.png
[20190116164920609.png]: /images/20220326/93770934f2084a378186ce82d24d28fe.png
[20190116164622354.png]: /images/20220326/23703dcfac9c42cb85f10d93748224f5.png
[20190116164714797.png]: /images/20220326/794b7a0389874475978f6907b348ece8.png
[2019011616483944.png]: /images/20220326/389627fec56c49d8ba255860576a2bde.png