【JS学习总结】使用JS实现前端的表单校验

前言：这个系列主要是对之前学习JavaScript实现的一些小demo的总结，总觉得不能这样学过了就算了，趁着假期就好好总结一下吧。

在平常的web开发中，我们常常会接触到实现注册功能，在注册的时候我们要防止用户输入一些不规范的内容，所以我们一般要对表单进行校验，校验又分为前端校验和后端校验。这里这涉及到前端校验。那么，我们怎么来使用JS代码来实现前端校验并在用户输入不规范的时候给用户显示提示信息呢？

步骤分析如下：

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

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

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

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

代码实现如下：

HTML代码：

 

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

JS代码：

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="";  
     } 
}