关闭

表单验证实现方法

标签: 正则表达式表单
528人阅读 评论(0) 收藏 举报
分类:
  • 每个元素进行验证,onblur事件
    • 当每个元素失去焦点时进行验证,如有错误,给出提示
  • 当元素获取焦点时,onfocus事件
    • 当元素获得焦点时,需要将错误信息清除
  • 提交按钮事件onsubmit需要验证所有表单元素

【解决方案】:

  • 每个元素的onblur事件写个验证方法

  • 验证是否为空,格式是否正确(正则表达式)
    用户名格式验证

function checkUserName(){
//获取输入的值
var username=document.getElementById
  (“username”).value;
  //是否为空
  if(username.length==0){
   var msg="用户名不能为空!";
    showError('nameerror',msg);
    return false;
  //格式是否正确(要求开头是字母,其余可以是字母数字,下划线,长度6-20位)
  //正则表达式
      /^[a-zA-Z][a-zA-Z0-9_]{5,19}$/;
      if(pattern.test(username))==flase{
       var msg="用户名格式非法";
       return flase;
      }
  return true;
  }
}
//提示错误信息
function  showError(eid,msg){                                       document.getElementById(eid).innerHTML=msg;
}
  • 每个元素的onfocus事件清除错误信息的方法
    只写一个方法,接受错误提示层id
function clearerreid){
     document.getElementById(eid).value="";//用于清除表单元素
     //document.getElementById(eid).innerHTML="";//清除div等素
 }
  • onsubmit
if(check1()==true&&check2()==true&&check3()==true){   

 }
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:34015次
    • 积分:513
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:10篇
    • 译文:1篇
    • 评论:3条
    最新评论