如何用JavaScript做表单的校验

企鹅博客
19004
文章
0
评论
2020年1月15日07:03:30 评论 23 views 2403字阅读8分0秒

一、原理

表单的校验通过输入框中添加onblur事件,输入框失去焦点时调用js函数,js判断输入的值,操作文档,通过innerHTML属性把输入框后面的提示显示出来。

最后在form标签中添加onsubmit事件,点击注册按钮时调用js函数,仅当所有输入框的value符合要求时,返回true,,表单提交。否则返回false表单不提交。

二、图片

bb.jpg

三、注意事项

js中创建正则表达式需要用"/^……$/”,^表示从头开始匹配,$表示匹配到最后一个字符。例如var reg=/^\w+[@]\w+[.comn]{3,4}$/;

正则表达式的\w,表示a-z,A-Z,0-9还包括下划线。

通常使用正则的test方法来判断字符串是否与正则匹配,如果返回值为true,则匹配成功,返回false,匹配失败。

四、实现代码

<!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='1' color='red'>用户名不能为空</font>"
                    }else if(name.length<=6){
                        nameSpan.innerHTML="<font size='1' color='red'>用户名要至少六位</font>"
                    }else if(!reg.test(name)){
                        nameSpan.innerHTML="<font size='1' color='red'>只能由字母数字下划线组成</font>"
                    }else{
                        nameSpan.innerHTML="<font size='1' color='red'>符合要求</font>"
                        return true;
                    }
                }
            //校验密码
            function checkCode(){
                var code=document.getElementById("code").value;
                var codeSpan=document.getElementById("codeSpan")
                if(code==''){
                    codeSpan.innerHTML="<font size='1' color='red'>密码不能为空</font>"
                }else if(code.length<6){
                    codeSpan.innerHTML="<font size='1' color='red'>密码至少六位</font>"
                }else{
                    codeSpan.innerHTML="<font size='1' color='red'>符合要求</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==''){
                        emailSpan.innerHTML="<font size='1' color='red'>邮箱不能为空</font>"
                }else if(!reg.test(email)){
                    emailSpan.innerHTML="<font size='1' color='red'>邮箱格式不正确</font>"
                }else{
                    emailSpan.innerHTML="<font size='1' color='red'>符合要求</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>

更多相关教程请访问 JavaScript视频教程

继续阅读
  • 版权声明: 发表于 2020年1月15日07:03:30
  • 转载注明:https://www.qieseo.com/413560.html
window.onload使用指南_javascript技巧 js教程

window.onload使用指南_javascript技巧

网页中的javascript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的低端,这样在运行脚本代...
jQuery链式调用与show知识浅析_jquery js教程

jQuery链式调用与show知识浅析_jquery

上篇文章给大家介绍了jQuery的框架,有关jquery的基础知识可以参考下。 jQuery使用许久了,但是有一些API的实现实在想不通。下面将使用简化的代码来介绍,主要关注jQuery的实现思想。 ...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: