【JavaScript】案例一：使用JS完成注册页面表单校验—

（一）初版：事件(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

巴特西

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

最新文章

热门文章