当前位置:Gxlcms > JavaScript > 如何利用JavaScript进行表单验证

如何利用JavaScript进行表单验证

时间:2021-07-01 10:21:17 帮助过:8人阅读


1、数据有效行性,安全性验证。3层验证。

  • 1、客户端 js脚本验证

  • 2、服务端 java-servlet 服务器语言验证

  • 3、数据库 数据库约束

2、onsubmit 表单提交事件。form表单元素相应事件,点击提交按钮触发。(type=”submit”)

  • onsubmit会接收true或false返回值。

    • 返回true提交当前表单,

    • 返回false,不提交表单

3、String对象。

  • 字符串对象的方法:字符串对象.方法名();

    • 常用方法:
      toLowerCase() 把字符串转化为小写
      toUpperCase() 把字符串转化为大写
      charAt(index) 返回指定位置的字符
      indexOf(字符串,index) 查找某个指定的字符串中首次出现的位置
      substring(zindex1.index2) 返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符

  • 电子邮件格式验证:

    • 1、使用getElementById()获取Email的值
      使用字符串方法indexOf( ) 判断Email的值是否包含“@”和“.”符号。
      根据函数返回值是true还是flase来决定是否提交表单

      var mail=document.getElementById("email").value;
      if(mail.indexOf("@")==-1){
        alert("Email格式不正确\n必须包含@");
         return false;   
      }
    • 2、使用String对象的length属性验证密码的长度

      var pwd=document.getElementById("pwd").value;
      if(pwd.length<6){
            alert("密码必须等于或大于6个字符");
            return false; 
      }
    • 3、验证两次输入密码是否一致

      var repwd=document.getElementById("repwd").value;
      if(pwd!=repwd){
           alert("两次输入的密码不一致");
           return false;   
      }
    • 4、使用length属性获取文本长度,使用for循环和substring()方法依次截断单个字符,判断每个字符是否是数字

      var user=document.getElementById("user").value;
          for(var i=0;i<user.length;i++){
          var j=user.substring(i,i+1)
          if(isNaN(j)==false){
             alert("姓名中不能包含数字");
             return false;   
          }
      }

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

  • 事件:
    onblur 失去焦点,当光标离开某个文本框时触发
    onfocus 获得焦点,当光标进入某个文本框时触发
    onkeypress 某个键盘按键被按下并松开

  • 方法:
    blur() 从文本域中移开焦点
    focus() 在文本域中设置焦点,即获得鼠标光标
    select() 选取文本域中的内容

  • 属性:

    1、清除文本框中初始内容,并设置边框为红色:

    function clearText(){
        var mail=document.getElementById("email");
        if(mail.value=="请输入正确的电子邮箱"){
        mail.value="";
        mail.style.borderColor="#ff0000";
        }
    }
    ……
        <td>Email:<input id="email" type="text"  class="inputs" value="请输入正确的电子邮箱" onfocus="clearText()"/></td>
      </tr>

    2、当用户输入无效的电子邮件地址,Email文本框中的内容将被自动选中并且高亮显示,提示用户重新输入

    if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
        alert("Email格式不正确\n必须包含符号@和.");
        document.getElementById("email").select();
        return false;
    }

    3、提示Email不能为空

    function checkEmail(){
        var mail= document.getElementById ("email");
        var pID= document.getElementById ("pEmail");
        pID.innerHTML="";
        if(mail.value==""){
             pID.innerHTML="Email不能为空";
             return false;
        }
    }
    ……
    <input id="email" type="text" class="inputs"  onblur="checkEmail()"/>
    <p class="red" id="pEmail"></p>
    • id 设置或返回文本域的id

    • value 设置或返回文本域的value属性的值

以上就是如何利用JavaScript进行表单验证的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行