How to use JavaScript to validate forms-JS Tutorial-php.cn

How to use JavaScript to validate forms

PHPz

Release： 2018-10-12 15:13:47

forward

1695 people have browsed it

1. Principle

The form is verified by adding the onblur event in the input box. When the input box loses focus, the js function is called. The js determines the input value, operates the document, and changes the content behind the input box through the innerHTML attribute. The prompt is displayed.

Finally, add the onsubmit event in the form tag, and call the js function when the registration button is clicked. Only when the values of all input boxes meet the requirements, true will be returned, and the form will be submitted. Otherwise, return false and the form will not be submitted.

2. Pictures

How to use JavaScript to validate forms

3. Notes

To create regular expressions in js, you need to use "/^...$/" , ^ means matching from the beginning, $ means matching to the last character. For example, var reg=/^w [@]w [.comn]{3,4}$/;

regular expression The w represents a-z, A-Z, 0-9 also includes underscores.

Usually use the regular test method to determine whether the string matches the regular expression. If the return value is true, the match is successful. If false is returned, the match fails.

4. Implementation code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用JavaScript完成表单的校验</title>
        <script>
            //校验用户名
            function checkName(){
                var name=document.getElementById("name").value;
                var nameSpan=document.getElementById("nameSpan")
                //正则表达式判断用户名
                var reg=/^\w+$/;
                if(name.length<1){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>用户名不能为空</font>"
                    }else if(name.length<=6){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>用户名要至少六位</font>"
                    }else if(!reg.test(name)){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>只能由字母数字下划线组成</font>"
                    }else{
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                        return true;
                    }
                }
            //校验密码
            function checkCode(){
                var code=document.getElementById("code").value;
                var codeSpan=document.getElementById("codeSpan")
                if(code==&#39;&#39;){
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>密码不能为空</font>"
                }else if(code.length<6){
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>密码至少六位</font>"
                }else{
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                    return true;
                }
            }
            //校验邮箱
            function checkEmail(){
                var email=document.getElementById("email").value;
                var emailSpan=document.getElementById("emailSpan")
                //用正则判断邮箱格式
                var reg=/^\w+[@]\w+[.comn]{3,4}$/;
                if(email==&#39;&#39;){
                        emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>邮箱不能为空</font>"
                }else if(!reg.test(email)){
                    emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>邮箱格式不正确</font>"
                }else{
                    emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                    return true;
                }
            }
            //校验所有信息，决定表单是否提交
            function checkForm(){
                if(checkName()&&checkCode()&&checkEmail()){
                    return true;
                }
                return false;
            }
        </script>
    </head>
    <body>
            <form id="regist" onsubmit="return checkForm()" action="http://www.baidu.com" method="get" style="margin-left: 520px;width: 400px;padding-left: 20px; height: 280px;border: 1px solid darkgray;">
                <h3>注册表单</h3>
                用户名：<input type="text" id="name" name="username" onblur="checkName()"/>
                    <span id="nameSpan" ></span><br/><br />
                 密码：<input type="password" id="code" name="password" onblur="checkCode()"/>
                    <span id="codeSpan"></span><br/><br />
                 邮箱：<input type="text" id="email" name="email" onblur="checkEmail()"/>
                    <span id="emailSpan"></span><br/><br />
                      <input type="submit" value="注册"/>
                 <input type="reset" value="重置"/>
            </form>
    </body>
</html>

Copy after login

For more related tutorials, please visit JavaScript video tutorial