关闭

表单验证实现方法

标签: 正则表达式表单
703人阅读 评论(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){   

 }
1
0
查看评论

四种表单验证方法的分析和比较

原文链接:http://www.ibm.com/developerworks/cn/web/0909_formvalid_hulx/ 前言 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证。无论服务器后端是什么样的系统,都不愿意把时间浪费在一些无效的信息上,必须...
  • afdnlw
  • afdnlw
  • 2013-11-28 21:45
  • 2114

HTML5中表单验证的8种方法

在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义。就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误。换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误。 但是真正的表单验证是什么? 是一种优化。 之所以说表单验证是一种优化,是因...
  • qq395537505
  • qq395537505
  • 2016-11-07 14:43
  • 3448

三种JQuery表单验证方式

行为与结构分离,通过使用name属性来关联字段和验证规则【推荐】 <script src ="../jquery.validate.messages_cn.js" type="text/javascript"></script> <...
  • J080624
  • J080624
  • 2016-09-21 15:00
  • 474

Html JS实现表单验证

<!--这是一个用JS做的一个html的表单验证,用的都是比较基础的知识,合适JS初学者, 功能有:各种表单验证,实现单击页面即可验证文本内容,如果不符合规则即无法提交表单, 实现不符合规则的文本框在点提交的时候自动聚焦到未填写的文本框,实现屏蔽右键查看代码-->
  • HeartIsland
  • HeartIsland
  • 2015-07-30 21:05
  • 4814

表单验证等其他公用js方法

/* * DIV或元素居中 * @return */ jQuery.fn.mCenterDiv = function () { this.css("position", "absolute"); this.css("border&qu...
  • u013214705
  • u013214705
  • 2016-12-05 20:44
  • 757

【Spring】官网教程阅读笔记(七):验证Form表单

【前言】内个验证表单的功能很常用,平时我在servlet实现web server的时候,依照客户端验证的原则,用jsp校验表单中的submit。比如jsp里面一个表单 用下面的函数验证(注意,验证的每个分支要有明确的return false/true;否则form表单在提交后会一片空白) funct...
  • arctan90
  • arctan90
  • 2015-04-02 15:54
  • 1352

javascript设计模式系列03_策略模式做的表单验证

效果图: 代码: *{ padding:0; margin:0} 身份证号码: 电话号码: 电邮: ...
  • jiang7701037
  • jiang7701037
  • 2018-01-24 14:36
  • 46

表单验证公用方法

(function(){ common = { //正则验证函数 checkRegexName:function(str,regex,domEle,errorText){ //str=验证的值,regex=正则规则,domEle=this...
  • qq_20353887
  • qq_20353887
  • 2016-09-28 17:44
  • 126

ASP.NET 表单验证实现浅析

对于Web应用的表单身份验证,因为公司有一个类库,采用 Session 实现,所以一直都没有去仔细了解。其实我并不赞成在 .NET 中用 Session 实现身份验证,毕竟 .NET 提供了一个强大的身份验证体系,并且公司的类库也没有实现什么特殊的功能,仅只是保存一个 Session 变量来提供身份...
  • orain
  • orain
  • 2008-11-12 10:20
  • 7215

JS封装常用表单验证

* 常用表单验证封装 * BY bruce 2013-05-27 */ var shapebase=new ShapeBase(); function ShapeBase() { //formobj = document.getElementsByName(frmname); ...
  • ahhbjz1
  • ahhbjz1
  • 2013-05-30 11:44
  • 3325
    个人资料
    • 访问:59445次
    • 积分:821
    • 等级:
    • 排名:千里之外
    • 原创:20篇
    • 转载:22篇
    • 译文:1篇
    • 评论:10条
    最新评论