第一阶段：前端开发_使用JS完成注册页面表单校验完善

2018-06-06

 

使用JS完成注册页面表单校验完善

 

一、步骤分析

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

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

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

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

 

二、代码实现

　　HTML代码：

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

 

　　JS代码：

　　　　<script>
        
            function showTips(id, info){
                var vaul = document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
            }
            
            function checkUser(id,info){
                //获取用户名输入的数据
                var uVaule = document.getElementById(id).value;
                if(uVaule ==""){
                    document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
                }else{
                    document.getElementById(id+"span").innerHTML="";
                }
            }
        </script>