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

最新推荐文章于 2024-07-09 17:01:34 发布

Mr.Piglet

最新推荐文章于 2024-07-09 17:01:34 发布

阅读量1.9k

点赞数 4

分类专栏： JavaScript 文章标签：验证 checkValidity setCustomValidity

本文链接：https://blog.csdn.net/qq_38931949/article/details/86507469

版权

JavaScript 专栏收录该内容

11 篇文章 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

方法：

方法

描述

checkValidity()

如果 input 元素中的数据是合法的返回 true，否则返回 false。

setCustomValidity()

设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。

使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下：

1. setCustomValidity('')

2. setCustomValidity(null)

3. setCustomValidity(undefined)

属性：

方法	描述
validity	布尔属性值，返回 input 输入值是否合法
validationMessage	浏览器错误提示信息
willValidate	指定 input 是否需要验证

Validity 属性：

属性	描述
customError	设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch	设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow	设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow	设置为 true, 如果元素的值小于它的最小值。
stepMismatch	设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong	设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch	设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing	设置为 true，如果元素 (required 属性) 没有值。
valid	设置为 true，如果元素的值是合法的。

小案例：简单转账

1. checkValidity() 方法验证

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

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

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

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

2.setCustomValidity()方法验证

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

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

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

展示页面：

<html>
 <head></head>
 <body>
  <p>约束验证 DOM 方法</p> 
  <!--checkValidity() 方法验证-->
  <div style="width:500px;"> 
   <div style="width: 250px; height: 30px; line-height: 30px;  float: left; background: green; text-align: right;">
     转账金额(1)：<input id="rmb1" type="number" min="1" max="200000" name="RMB1" required="" /> 
   </div> 
   <div style="width: 250px; height: 30px; line-height: 1px; float: left; color: red; background: black;"> 
    <p id="rmb1msg"></p> 
   </div> 
  </div> 

  <!--setCustomValidity()方法验证-->
  <div style="width:500px;"> 
   <div style="width: 250px; height: 30px; line-height: 30px;  float: left; background: green; text-align: right;">
     转账金额(2)：<input id="rmb2" type="number" min="1" max="200000" name="RMB2" /> 
   </div> 
   <div style="width: 250px; height: 30px; line-height: 1px; float: left; color: red; background: black;"> 
    <p id="rmb2msg"></p> 
   </div> 
  </div>
 </body>
</html>

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;

}

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