如何利用JavaScript进行表单验证

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

• 1、客户端 js脚本验证

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

• 3、数据库 数据库约束

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

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

• 返回true提交当前表单，

  立即学习“Java免费学习笔记（深入）”；

• 返回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属性验证密码的长度

  

  情感家园企业站5.0 多语言多风格版

  一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！

  下载

  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

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

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

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

• 属性：

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

  function clearText(){
      var mail=document.getElementById("email");
      if(mail.value=="请输入正确的电子邮箱"){
      mail.value="";
      mail.style.borderColor="#ff0000";
      }
  }
  ……
      Email：
    

  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;
      }
  }
  ……
  
  

• id    设置或返回文本域的id

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