HTML5+setCutomValidity()函数验证表单实例分享


Posted in Javascript onApril 24, 2015

HTML5表单验证给前端人员带来了便利,但是在用户体验上存在一些缺陷,默认的提示对用户很不友好,无法准确的获取想要的信息。好在大牛们在接口设计的时候提供了setCustomValidilty方法可以自定义提示信息。这是一个好消息,但也存在一些弊端,需要让开人员做额外的一些处理才达到真正想要的目的。

示例一:

<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>Html5页面使用javascript验证表单判断输入</title>
<script language="javascript">
function check(){
  var pass1=document.getElementbyid("pass1");
  var pass2=document.getElementbyid("pass2");
  if (pass1.value!=pass2.value){
    pass2.setCustomvalidity("密码不一致");
  else    
    pass2.setCustomvalidity("");
  }
  var email=document.getElementbyid("email");
  if (!email.checkValidity())
    email.setCustomvalidity("请输入正确的email地址");
}
</script>
</head>
<form id="testForm" onsubmit="return check()">
  密码:<input type="password" name="pass1" id="pass1" /><br/>
  确认密码:<input type="password" name="pass2" id="pass2" /><br/>
  Email:<input type="email" name="email" id="email" /><br/>
  <input type="submit" />
</form>

示例二:

<!DOCTYPE html>
<html>
<head>
  <mata charset="utf-8">
  <title>form test</title>
</head>

<body>
  <form name="test" action="." method="post">
    <input type="text" required pattern="^\d{4}$" oninput="out(this)" placeholder="请输入代码" >
    <button type="submit">Check</button>
  </form>
<script type="text/javascript">
function out(i){
  var v = i.validity;
  if(true === v.valueMessing){
    i.setCustomValidity("请填写些字段");
  }else{
    if(true === v.patternMismatch){
      i.setCustomValidity("请输入4位数字的代码");
    }else{
      i.setCustomValidity("");
    }
  }
}
</script>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
AngularJS基础知识
Dec 21 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
微信小程序使用蓝牙小插件
Sep 23 Javascript
js闭包实现按秒计数
Apr 23 #Javascript
jQuery中使用each处理json数据
Apr 23 #Javascript
javascript数组去重方法汇总
Apr 23 #Javascript
javascript实现英文首字母大写
Apr 23 #Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 #Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 #Javascript
原生js和jquery实现图片轮播特效
Apr 23 #Javascript
You might like
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
js实现交通灯效果
2017/01/13 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
Python实现获取网站PR及百度权重
2015/01/21 Python
Python匹配中文的正则表达式
2016/05/11 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
深入浅析python with语句简介
2018/04/11 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
EJB的角色和三个对象
2015/12/31 面试题
竞聘演讲稿
2014/04/24 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
城南旧事观后感
2015/06/11 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
Win11查看设备管理器
2022/04/19 数码科技