【JavaScript】案例一：使用JS完成注册页面表单校验——事件(onsubmit&onfocus&onblur)

（一）初版：事件(onsubmit）

步骤分析：

第一步：确定事件(onsubmit)并为其绑定一个函数

第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)

第三步：对用户输入的数据进行判断

第四步：数据合法(让表单提交)

第五步：数据非法(给出错误提示信息，不让表单提交)

 

问题：如何控制表单提交？

关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个

返回值。 onsubmit = return checkForm()

 

 

*注意点：

• onsubmit不是加在注册按钮那里，加在表单的<form>标签内；
• onsubmit="return 函数名（）"
• 获取元素时，要在相应的<input/>标签内写上id，一定要一样！
• if (uValue == "")  //判断为空
• return false; //不会提交表单
• if (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue))  //匹配正则表达式

 

代码实现

 

JS部分：

 <script>
             function checkForm() {
                 //alert("aa");
                 /**校验用户名**/
                 //1.获取用户输入的数据
                 var uValue = document.getElementById("user").value;
                 //alert(uValue);
                 if (uValue == "") { //为空
                     //2.给出错误提示信息
                     alert("用户名不能为空！");
                     return false; //不会提交表单
                 }
                 /*校验密码*/
                 var pValue = document.getElementById("password").value;
                 if (pValue == "") {
                     alert("密码不能为空！");
                     return false;
                 }
                 /**确认密码*/
                 var rpValue = document.getElementById("repassword").value;
                 if (rpValue != pValue) {
                     alert("两次密码输入不一致！");
                     return false;
                 }
                 /**校验邮箱*/
                 var eValue = document.getElementById("email").value;
                 if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)) { //不匹配正则表达式
                     alert("邮箱格式不正确！");
                     return false;
                 }
             }
         </script>

 

Html 部分：（需要在指定位置添加 id）

<form aciton="#" method="get" name="regForm" onsubmit="return checkForm()">

 

结果：

http://127.0.0.1:8020/WEB03_JS/%E6%A1%88%E4%BE%8B%E4%B8%80%EF%BC%9A%E4%BD%BF%E7%94%A8JS%E5%AE%8C%E6%88%90%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2%E8%A1%A8%E5%8D%95/01_%E4%BD%BF%E7%94%A8JS%E5%AE%8C%E6%88%90%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2%E8%A1%A8%E5%8D%95register.html

（二）优化版：事件(onfocus&onblur）

 

步骤分析：

第一步：确定事件(onfocus 聚焦事件)并为其绑定一个函数

第二步：书写绑定函数(在输入框的后面给出提示信息)

第三步：确定事件(onblur 离焦事件)并为其绑定一个函数

第四步：书写函数(对数据进行校验，分别给出提示)

 

 

* 注意点：

• 双引号内只用单引号

onfocus="showTips('user','用户名必填！')"

• alert() 弹警告窗口；  .innerHTML 写在页面内部
• 比较时用==

uValue == ""

 

 

 代码：

 

/**因为多处需要用到相同代码，所以用函数传参*/

 

html部分：

<input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空！')" /><span id="userspan"></span>

<input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码必填！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>

 

 

Js部分：

 

<script>
            /**改进，传参*/
            function showTips(id, info) {
                document.getElementById(id + "span").innerHTML = "<font color='gray'>" + info + "</font>";
            }

            function check(id, info) {
                //1.获取用户输入的用户名数据
                var uValue = document.getElementById(id).value;
                //2.进行校验
                if (uValue == "") {
                    document.getElementById(id + "span").innerHTML = "<font color='red'>" + info + " </font>";
                } else {
                    document.getElementById(id + "span").innerHTML = "";
                }
            }
        </script>

 

 

结果：

http://127.0.0.1:8020/WEB03_JS/%E6%A1%88%E4%BE%8B%E5%9B%9B%EF%BC%9A%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C%E5%AE%8C%E5%96%84/%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2%E8%A1%A8%E5%8D%95%E6%95%99%E6%A1%88%E5%AE%8C%E5%96%84.html