前端项目积累和总结——表单验证

前言：

自2017.7.6入职，如今已经整整五个月。在天津的培训阶段已经接近尾声，我认为有必要总结一下这段时间学到的点点滴滴。做技术重在经验和积累，既然入了软件开发的“坑”，我只能硬着头皮往下走。无论如何，在这条“软”路上，我走过的每一步都应有它的意义和价值。

该前端项目简述：一个自动化数据采集软件，前端用html+css+javascript+jQuery实现，后端用node.js与前端交互。

本人负责部分：登录界面、主界面、用户管理界面、客户端用户管理界面。

积累：（一）表单验证

因为我做的就是用户相关的东西，表单验证环节至关重要。这里做的验证仅是本地合法化验证，不与后端相关（如果用户输入有误，前端页面给出提示更改，同时阻止向后端发送数据）。因此，前端的表单验证只用来提示用户。

1. 正则表达式

用正则表达式来匹配字符，是表单验证的常用方法。

两种定义方法：

var re = new RegExp("a","i");var re = /a/i;

正则表达式是由普通字符（如字符A到字符Z）和特殊字符（称为元字符）组成。

正则表达式基础知识：https://www.w3cschool.cn/regexp/2yjd1pq6.html

（特殊字符、数字、空格、任意字符、中文匹配 ......）

正则表达式对象的方法：

exec(); //执行匹配，返回找到值的数组，没找到返回nulltest(); //测试匹配，返回bool值toSource(); //返回RegExp对象源代码toString(); //返回RegExp对象字符串

2. 项目中应用实例

（1）HTML：

<div class="login-box">  <form class="login-form" action="/user/login" method="post">    <div class="controlgrp">      <label class="control-lbl" id="name-label" for="name"></label>      <input class="control-name" type="text" name="name" placeholder="用户名（中文或英文）" id="userName"/>    </div>     <span class="msg"></span>    <div class="controlgrp">      <label class="control-lbl"id="passwd-label" for="passwd"></label>      <input class="control-pwd" type="password" name="passwd" placeholder="密码（6-16个字符）" id="userPwd"/>    </div>    <span class="msg"></span>    <p id="message" style="margin-left:110px;font-size:14px;"><%= message %></p>    <div class="control">        <input class="control-remember" type="checkbox" name="remember-me" id="remember" ><label style="font-size:14px; vertical-align:middle;">记住我</label>    </div>    <div class="control">      <input class="control-submit" type="submit" value='登录' onclick="setCookie()">      <input class="control-reset" type="button" value='重置' onclick="login_reset()">    </div>  </form></div><!-- login-box  end -->

（2）javascript

//计算字符长度（一个汉字为两个字符长度）function getLength(str){return str.replace(/[^\x00-xff]/g,"xx").length;}//查找字符串中的重复字符个数function findStr(str,n){var tmp=0;for(var i=0;i<str.length;i++){if(str.charAt(i)==n){tmp++;}}return tmp;}window.onload = function(){login_form_check();}//登录页面-表单合法化校验var usernameCheckRes = true;var userpwdCheckRes = true;function login_form_check(){var oName = document.getElementById("userName");var oPwd = document.getElementById("userPwd");var oMsg = document.getElementsByClassName("msg");var oName_msg = oMsg[0];var oPwd_msg = oMsg[1];//用户名合法化校验oName.onblur = function(){var name_length=getLength(this.value);var re=/[^\w\u4e00-\u9fa5]/g;//非法的用户名//含有非法字符if(re.test(this.value)){oName_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>含有非法字符';usernameCheckRes = false;}//不能为空else if(this.value==""){oName_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能为空';usernameCheckRes = false;}//长度应为4-20个字符else if(name_length<4 || name_length>20){oName_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>长度应为4-20个字符';usernameCheckRes = false;}//正确else{oName_msg.innerHTML = '<i class="fa fa-check-circle" style="margin-right:5px;"></i>';usernameCheckRes = true;}}//密码合法化验证oPwd.onblur = function(){var m=findStr(oPwd.value,oPwd.value[0]);var re_n=/[^\d]/g;//数字var re_t=/[^a-zA-Z]/g;//字母//不能为空if(this.value==""){oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能为空';userpwdCheckRes = false;}//长度应为6-16个字符else if(this.value.length<6 || this.value.length>16){oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>长度应为6-16个字符';userpwdCheckRes = false;}//不能全为相同字符else if(m == this.value.length){oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能全为相同字符';userpwdCheckRes = false;}//不能全是数字else if(!re_n.test(this.value)){oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能全为数字';userpwdCheckRes = false;}//不能全是字母else if(!re_t.test(this.value)){oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能全为字母';userpwdCheckRes = false;}//正确else{oPwd_msg.innerHTML = '<i class="fa fa-check-circle" style="margin-right:5px;"></i>';userpwdCheckRes = true;}}}

同时阻止向服务器端发送数据（两种情况）

a. submit提交的表单，通过onsubmit返回false

<form class="login-form" action="/user/login" method="post" onsubmit="return login_check()">

function login_check(){var msg = document.getElementsByClassName("msg");if(document.getElementById("userName").value == ""){ msg[0].innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能为空';document.getElementById("userName").focus();return false;}else if(false == usernameCheckRes){document.getElementById("userName").focus();return false;}else if(document.getElementById("userPwd").value == ""){msg[1].innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能为空';document.getElementById("userPwd").focus();return false;}else if(false == userpwdCheckRes){document.getElementById("userPwd").focus();return false;}return true;}

b. 如果通过ajax方式与服务器端交互，则在调用ajax函数之前阻止向服务器端发送数据

if(false == nameCheckRes){document.getElementById("add-name").focus(); //定位到当前位置}else if(false == pwdCheckRes){document.getElementById("add-pwd").focus();  //定位到当前位置}else{loadXMLDoc("/user/create", str, function() {            ... }

（3） 实际效果

后记：

这是自己第一次写博客来记录每天的收获，希望以后能坚持下去，加油！