js表单验证

数据有效性，安全性验证 3层

客户端 js脚本验证
服务端 java-Servlet 服务器语言
数据库数据约束。

onsubmit 事件(表单提交事件)，提交表单时触发。onsubmit会接受 true或false返回值。返回true提交当前表单，返回false 不提交表单

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

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

使用String对象的length属性验证密码的长度

var pwd=document.getElementById("pwd").value;
if(pwd.length<6){
      alert("密码必须等于或大于6个字符");
      return false; 
}

验证两次输入密码是否一致

var repwd=document.getElementById("repwd").value;
if(pwd!=repwd){
     alert("两次输入的密码不一致");
     return false;   
}

使用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;   
    }
    }

事件
- onblur 失去焦点，当光标离开某个文本框时触发
- onfocus 获得焦点，当光标进入某个文本框时触发
- onkeypress 某个键盘按键被按下并松开
方法
- blur() 从文本域中移开焦点
- focus() 在文本域中设置焦点，即获得鼠标光标
- select() 选取文本域中的内容

属性

id 设置或返回文本域的id

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

  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>


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


  function checkEmail(){
      var mail= document.getElementById ("email");
      var divID= document.getElementById ("DivEmail");
      divID.innerHTML="";
      if(mail.value==""){
           divID.innerHTML="Email不能为空";
           return false;
      }
  }
  ……

js表单验证

数据有效性，安全性验证 3层

onsubmit 事件(表单提交事件)，提交表单时触发。onsubmit会接受 true或false返回值。返回true提交当前表单，返回false 不提交表单

推荐阅读更多精彩内容