用JavaScript实现简单的表单验证

最新推荐文章于 2022-07-24 22:34:22 发布

布里啾啾迪布里多oo

最新推荐文章于 2022-07-24 22:34:22 发布

阅读量6k

点赞数 23

文章标签： JavaScript 表单验证 form表单

本文链接：https://blog.csdn.net/qq_42063422/article/details/102564757

版权

用JavaScript实现一个简单的表单验证：

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

JavaScript验证内容：

验证用户名是否为空；
验证用户名是否在6-14之间；
验证密码是否为空；
验证密码是否小于6位；
验证确认密码是否与密码一致；
验证所填表单是否正确即符合要求正确则提交表单；

Form表单

用于收集用户信息，如：登录、注册等场景；所有要提交的数据都必须放在form标签中

action：提交地址、动作，与input标签中typy标签的submit属性相关联。提交地址是action的地址

method:提交方法、该属性用来指定数据传送到服务器的方式。它有两种属性值，分别为 get 和 post。get 属性值表示将输入的数据追加在 action 指定的地址后面，并传送到服务器。当属性值为 post 时，会将输入的数据按照 HTTP 协议中的 post 传输方式传送到服务器。

input标签：输入框，是表单中最重要的部分

name：指定名字，因为提交的是键值对，所以必须要指定名字，否则无法提交，即使提交了也没有意义

value：文本框的内容，一般用在不能输入的类型中，如改变按钮的名字等。

placeholder：占位内容，通常用于提示：

readonly：只读模式，设置后无法修改输入框的内容

disabled：禁用状态

size：由于输入框是单行的，所以只能设置宽度

maxlength：限制输入框最大输入的字符个数
　　
type属性：

text：普通文本，标签的默认属性时text ，通常如输入用户名用的是text

passworld：密文文本，输入的内容不显示。如密码输入框

submit：提交按钮。要与action一起用。

radio：单选框，多个关联选项name属性要一致，需要设置value，默认选中用checked设置

这里介绍平时开发网站中两个常见的事件

onfocus: 事件在对象获得焦点时发生。

onblur: 事件会在对象失去焦点时发生。

通俗的讲就是：

当鼠标点击文本框时，文本框获得焦点，触发onfocus，文本框中的值变为空，鼠标点击另外一处时，即文本
框失去焦点，触发onblur事件，进行判断文本框的内容，若value="",则给value赋值请输入用户名。

JavaScript中提交表单的两种方式：

onsubmit事件： 只能表单上使用,提交表单前会触发

onclick事件： 按钮等控件使用, 用来触发点击事件

第一种方式：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功

<script type="text/javascript">
     function validate(obj) {
        if (confirm("提交表单?")) {
           alert(obj.value);
           return true;
        } else {
           alert(obj.value);
           return false;
        }
     }
  </script>
  <body>
    <form action="http://www.baidu.com" onsubmit="return validate(document.getElementByIdx_x('myText'));"> 
   
       <input type="text" id="myText"/>
       <input type="submit" value="submit"/>
   
    </form>
  </body>

第二种方式：通过button按钮来触发表单提交事件οnclick=“submitForm();”，会忽略掉其他标签中的属性，比如form标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证。

<script type="text/javascript">
     function validate() {
        if (confirm("提交表单?")) {
           return true;
        } else {
           return false;
        }
     }
     
     function submitForm() {
        if (validate()) {
           document.getElementByIdx_x("myForm").submit();
        }
     }
  </script>
  <body>
    <form action="http://www.baidu.com" id="myForm">
   
       <input type="text"/>
       <input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
   
    </form>
  </body>

表单验证实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表单验证</title>

</head>

<body>
    <form name="Myform">
        <table>
            <tr>
                <td>
                    用户名:</td>
                <td><input type="text" id="username" name="username" onblur="checkName(this.value)" onfocus="clearNameError()" /></td>
                <td><span id="nameError"></span></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" id="userpswd" name="userpswd" onblur="checkUserpswd(this.value)" onfocus="clearPswdError()" /></td>
                <td><span id="pswdError"></span></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" id="confirmpswd" name="confirmpswd" onblur="isSame();" onfocus="clearSameError()" /></td>
                <td><span id="confirmpswdError"></span></td>
            </tr>
            <tr>
                <td><input type="button" value="注册" onclick="checkAll();" /></td>
            </tr>
        </table>
    </form>
    <script type="text/javascript">
        String.prototype.trim = function() {
            return this.replace(/(^\s*)|(\s*$)/g, "");
        }

        function checkName(username) {
            username = username.trim();
            var ok = false;
            var nameError = document.getElementById("nameError");
            if (username == "") {
                nameError.innerHTML = "<font color='red'>用户名不能为空 </font>";
                ok = false;
            } else if (username.length < 6 || username.length > 14) {
                nameError.innerHTML = "<font color='red'>用户名长度6-14 </font>";
                ok = false;
            } else {
                nameError.innerHTML = " ";
                ok = true;
            }
            return ok;
        }

        function clearNameError() {
            var nameError = document.getElementById("nameError");
            nameError.innerHTML = "";
        }

        function checkUserpswd(userpswd) {
            var pswdError = document.getElementById("pswdError");
            var ok = false;
            if (userpswd == "") {
                pswdError.innerHTML = "<font color='red'>密码不能为空 </font>";
                ok = false;

            } else if (userpswd.length < 6) {
                pswdError.innerHTML = "<font color='red'>密码不少于6位 </font>";
                ok = false;

            } else {
                pswdError.innerHTML = "";
                ok = true;

            }
            return ok;
        }

        function clearPswdError() {
            var pswdError = document.getElementById("pswdError");
            pswdError.innerHTML = "";
        }

        function isSame() {
            var userpswd = document.getElementById("userpswd").value;
            var confirmpswd = document.getElementById("confirmpswd").value;
            var confirmpswdError = document.getElementById("confirmpswdError");
            var ok = false;

            if (userpswd != confirmpswd) {
                confirmpswdError.innerHTML = "<font color='red'>密码不一致</font>";
                ok = false;

            } else {
                confirmpswdError.innerHTML = '';
                ok = true;

            }
            return ok;
        }

        function clearSameError() {
            var confirmpswdError = document.getElementById("confirmpswdError");
            confirmpswdError.innerHTML = '';
        }

        function checkAll() {
            var username = document.getElementById("username").value;
            var userpswd = document.getElementById("userpswd").value;
            if (checkName(username) && checkUserpswd(userpswd) && isSame()) {
                document.Myform.submit();
            }
        }
    </script>
</body>
</html>