search

Qingquan-Li / blog

My Blog
https://Qingquan-Li.github.io/blog/
132 stars 16 forks source link

JavaScript表单验证 #41

Open Qingquan-Li opened 7 years ago

Qingquan-Li commented 7 years ago

本文重点：

  • 学会使用JavaScript实现表单验证
  • 会制做输入提示的特效

表单验证简介

表单验证是什么？

数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

表单验证必要性

  1. 减轻服务器的压力；
  2. 保证数据的可行性和安全性

网页上常见的验证形式和内容


表单验证基本步骤与基本结构

附：String 对象常用属性和方法

类别 名称 说明
属性 length 返回字符串的长度（包括空格等）
方法 toLowerCase() 把字符串转化为小写
方法 toUpperCase() 把字符串转化为大写
方法 charAt(index) 返回在指定位置的字符
方法 indexOf(str，index) 查找某个指定的字符串在字符串中首次出现的位置，str 为查找字符串，index 为查找的起始位置
方法 substring(index1，index2) 返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引 index2 对应的字符

表单验证基本结构-实例：

<!DOCTYPE html>
<html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>JavaScript 表单验证基本结构</title>
    <script type="text/javascript">
        function checkform(){
            // 1. 获取要验证的表单元素
            var input =  document.getElementById("username");
            //2.  验证输入的内容（利用String对象的方法进行验证）
            if (input.value == "" || input.value.length > 12) {
                //3.弹出提示内容
                alert("内容不能为空或长度不能超过12个字符");
                return false;    //返回验证结果
            }
            return true ;    //返回验证结果
        }
    </script>
    </head>
    <body>
    <form action="" method = "get" id = "myform" onsubmit = "return checkform()">
        用户名：<input type = "text" name = "username" id = "username"/>
        <br>
        <input type = "submit" value = "提交"/>
    </form>
</body>
</html>


表单验证升级-实时提示

实例：

<!DOCTYPE html>
<html>
<head>
<title>验证登录页面</title>
</head>
<body>
<table>
    <form action="" method="post" name="myform" onsubmit="return check()">
        <tr>
            <td> 账号：</td>
            <td><input id="username" type="text"></td>
        </tr>
        <tr>
            <td> 密码：</td>
            <td><input id="pwd" type="password" /></td>
        </tr>
        <tr>
            <td><input name="B1" type="submit" value="提交" class="submit"></td>
        </tr>
    </form>
</table>
<script type="text/javascript">
//定义一个函数，函数名叫 $ 。接收一个参数 pElementID （可随便命名为id、element、abc等），下面每个表单调用时返回 element 节点元素内容（表单元素的内容)。
//不用每次都使用变量获取表单元素，如： var input =  document.getElementById("username"); 再进行验证。
 function $(pElementID){    
    return document.getElementById(pElementID);
}
 function check () {
    var pUserName=$("username");
    if ( pUserName.value == "" ) {
        alert("请输入用户名！");
        return false;
    }
    if (pUserName.value.length > 16 || pUserName.value.length < 4 ) {
        alert("用户名必须为4-16位字符");
        return false;
    }
    var pwd=$("pwd");
    if(pwd.value==""){
        alert("密码不能为空");
        return false;
    }
    if(pwd.value.length<6){
        alert("密码不能少于6位");
        return false;
    }
    return true;
}
</script>
</body>
</html>

文本框对象

文本框对象、常用的属性、方法和事件

类别 名称 说明
属性 id 设置或返回文本域的 id
属性 value 设置或返回文本域的 value 属性的值
方法 blur() 从文本域中移开焦点
方法 focus() 在文本域中设置焦点，即获得鼠标光标
方法 select() 选取文本域中的内容
事件 onblur 失去焦点，当光标离开某个文本框时触发
事件 onfocus 获得焦点，当光标进入某个文本框时触发
事件 onkeypress 某个键盘按键被按下时触发 
<script type="text/javascript">
//获取DOM元素函数
 function $(pElementID){
    return document.getElementById(pElementID);
}
//更改DOM元素的class名称
function updateRed(obj){
    var mObj=$(obj);
    mObj.className="red";
}
// 给元素边框颜色为红色
function updateIntro(){
    var intro=$("intro");
    intro.style.borderColor="red";
}
//更改边框颜色为绿色
function checkIntro(){
    var intro=$("intro");
    intro.style.borderColor="#61b16a";
}

//验证用户函数
function checkUser(){
    var userName=$("username");
    var userMess=$("userMess");
    userMess.innerHTML="";
    if (userName.value == "" ) {
        userMess.innerHTML="请输入用户名";
        userName.className="red";
        return false;
    }else if (userName.value.length> 16 || userName.value.length< 4 ) {
        userMess.innerHTML="用户名必须为4-16位字符，请重新填写";
        userName.className="red";
        return false;
    }
    userName.className="borSty";
    return true;
}
//验证密码
function checkPwd(){
    var pwd=$("pwd");
    var pwdMess=$("pwdMess");
    pwdMess.innerHTML = "";
    if(pwd.value==""){
        pwdMess.innerHTML="密码不能为空";
        pwd.className="red";
        return false;
    }else if(pwd.value.length < 6){
        pwdMess.innerHTML="密码不能少于6位";
        pwd.className="red";
        return false;
    }
    pwd.className="borSty";
    return true;
}

//验证函数
function check () {
    if(checkUser() && checkPwd()){
        return true;
    }
    return false;
}
</script>