HTML5+setCutomValidity()函数验证表单实例分享
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遇到html5的一些表单属性
input属性: placeholder:输入框的默认值,向用户显示描述性说明文字或者提示信息 autocomplete:值为on和off..on则代表当该字段填写并提交后再返回该页,再输入时会显示以前输入的.off则是关闭,包含用户输入数据的安全.默认为on autofocus:页面载入时设置某个input自动获取焦点,注意该页面只能设置一个input的这个属性,设置多个相当于没有设置. list特性和datalist:通过list为某个输入框增加下拉列表..相当于js实现的"自动完成&quo
-
javascript实现的动态添加表单元素input,button等(appendChild)
写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 复制代码 代码如下: var newInput = document.createElement("input"); 2.设定相关属性,如name,type等 复制代码 代码如下: newInput.type=mytype; newInput.name="input1"
-
php+html5使用FormData对象提交表单及上传图片的方法
本文实例讲述了php+html5使用FormData对象提交表单及上传图片的方法.分享给大家供大家参考.具体分析如下: FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台.在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量. 使用FormData对象 1.创建一个FormData空对象,然后使用append方法添加key/value 复制代码 代码如下: var formdata = new
-
Javascript和Java获取各种form表单信息的简单实例
大家都知道我们在提交form的时候用了多种input表单.可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的.有一些组合的form类似于checkbox或者radio或者select我们如何用javascript获取和在服务器中获取提交过来的参数呢?多说无用.上代码: Jsp-html代码: 复制代码 代码如下: <form action="input.do" name="formkk"> &
-
javascript 清空form表单中某种元素的值
下面就以情况type="text"为例: 复制代码 代码如下: <form id="form1" method="post"> <input type="text" /> <input type="text" /> <input type="button" value="clear" onclick="Refresh
-
JavaScript 表单验证正则表达式大全[推荐]
具体和函数结合的使用方法,还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码 复制代码 代码如下: 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可以用来删除空白行 匹配HTML标记的正则表达式:< (S*?)[^>]*>.*?
-
JavaScript获取按钮所在form表单id的方法
本文实例讲述了JavaScript获取按钮所在form表单id的方法.分享给大家供大家参考.具体如下: 这里使用javascript获取form表单按钮的id,可以通过下面的JS代码获取. <!DOCTYPE html> <html> <body> <h1>www.sharejs.com</h1> <form id="form1"> <button id="button1" type=&q
-
JavaScript/jQuery 表单美化插件小结
Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://www.emblematiq.com/lab/niceforms/demo/niceforms.html GitHub:https://github.com/emblematiq/Niceforms 使用方法,在页面头部引入以下脚本及样式即可: 复制代码 代码如下: <link href="ni
-
HTML5+setCutomValidity()函数验证表单实例分享
HTML5表单验证给前端人员带来了便利,但是在用户体验上存在一些缺陷,默认的提示对用户很不友好,无法准确的获取想要的信息.好在大牛们在接口设计的时候提供了setCustomValidilty方法可以自定义提示信息.这是一个好消息,但也存在一些弊端,需要让开人员做额外的一些处理才达到真正想要的目的. 示例一: <!DOCTYPE HTML> <head> <meta charset="UTF-8"> <title>Html5页面使用java
-
Ajax带提示的验证表单实例
本文实例讲述了Ajax带提示的验证表单.分享给大家供大家参考.具体如下: 这是一个常用的Ajax表单验证程序,实时提示你输入的字符是否符合要求,简洁明快,便于修改,这是用JavaScript实现的,没有掺杂其它的框架类代码,因此比较实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ajax-table-check-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
-
运用jQuery写的验证表单(实例讲解)
//运用jQuery写的验证表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equ
-
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
环境:Django 2.0.7 xadmin 2.0.1 需求:下拉表单显示的是模型的其他表项或者外键 方法:在adminx.py文件中,在class YourModel Admin中重写函数 # 重写formfield_for_dbfield,设计add和edit表单 def formfield_for_dbfield(self, db_field, **kwargs): if not self.request.user.is_superuser: # 对case这个表项的下拉框选择进行过滤
-
使用jQuery validate 验证注册表单实例演示
Validation是jQuery的插件,提供的方法可以大大简化验证表单的工作,功能也足够一般的需要了.rules也足够简单,很容易上手,举个简单的例子,用validation来验证注册表单. 首先确定验证的目标是: 1. 必填项不能为空 2. 注册用户名必须为6-12个字符内 3. 合格的email格式 4. 密码必须为6-18个字符 5. 确认密码必须跟密码一致 ok,目标很明确了.正片开始 复制代码 代码如下: <script type="text/javascript"
-
javascript巧用eval函数组装表单输入项为json对象的方法
本文实例讲述了javascript巧用eval函数组装表单输入项为json对象的方法.分享给大家供大家参考,具体如下: 在ajax方式做web开发时,经常会遇到会保存前,收集表单输入项,组成json对象,然后把对象直接post到服务端的场景 常规做法是在js里写类似如下的代码: var myObj = {}; myObj.x = document.getElementById("x").value; myObj.y = document.getElementById("y&q
-
JavaScript简单验证表单空值及邮箱格式的方法
本文实例讲述了JavaScript简单验证表单空值及邮箱格式的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equiv="
-
django处理select下拉表单实例(从model到前端到post到form)
现在假如要写一个按照"标题",'内容','作者'等等进行针对性的选择,这时需要涉及到使用select下拉表单来进行选择.django是可以比较简单的解决这个问题的. 下面是model: from django.db import models class TestModel(models.Model): SELVALUE = ( ('标题', 'first'), #前面是展示在前端界面的内容,后面的'first'是真正存在数据库中的 ('内容', 'second'), ('作者', '
-
js正则表达式验证表单【完整版】
效果图: 图(1)初始图 图(2)填入信息校验 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>完整验证表单</title> <style type="text/css"> *{margin: 0;padding: 0;list-style:none;} bod
-
JS提交form表单实例分析
本文实例讲述了JS提交form表单.分享给大家供大家参考,具体如下: 一.javascript 页面加裁时自动提交表单: Form表单: <form method="post" id="myform" action="a.php"> <input type="submit" value="提交表单"> </form> javascript 代码: <script t