HTML5中表单验证的好处？表单验证怎么做

本文目录

• HTML5中表单验证的好处
• 表单验证怎么做
• 如何用jquery进行表单验证
• 什么是表单验证
• 表单验证的简介
• 怎么自己写form表单验证自定义规则
• 请问这是什么意思，什么叫表单验证
• 什么是表单验证，它的作用是什么
• HTML5中表单内置验证规则是什么，有哪些内置验证规则呢
• 求javascript表单验证大全

HTML5中表单验证的好处

HTML5中表单验证有如下好处：

1、可判断用户是否已填写表单中的必填项目。

2、可判断用户输入的邮件地址是否合法。

3、可判断用户是否已输入合法的日期。

4、可判断用户是否在数据域(numeric field)中输入了文本。

表单验证通常采用策略模式的思想，把一个个验证规则封装成一个函数，比如非空规则、最大长度规则等，不同的输入框选择某一个或者某几个规则进行验证。

扩展资料：

HTML表单一直都是Web的核心技术之一，有了它才能在Web上进行各种各样的应用。HTML5 Forms新增了许多新控件及其API，方便做更复杂的应用，而不用借助其它Javascript框架。

表单有以下几个基本知识点：

1、表单仍是以《form》元素作为容器，可在其中设置基本的提交特性。

2、当用户提交页面时，表单仍然向服务器发送表单控件的值。

3、之前老版本中的表单控件，如text radio checkbox等等，都可以按原有方式使用，尽管增加了新的功能。

4、仍然可以使用javascript操作表单控件。

表单验证怎么做

表单验证是javascript中的高级选项之一。JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

举例如下：

#frm span {    display: none;    color: #FF0000;}

var st=false;function chkname(o){   st=/^{2,4}$/gi.test(o.value);   o.nextSibling.innerHTML=’姓名应为2-4个汉字’;   o.nextSibling.style.display=(st?’none’:’inline’);}function chkqq(o){   st=/^\d{5,11}$/gi.test(o.value);   if(!st){      o.nextSibling.innerHTML=(o.value==’’?’请输入QQ号’:’QQ号应为5-11位数字’);      o.nextSibling.style.display=’inline’;      return;   }   else o.nextSibling.style.display=’none’;}// ....function chkfrm(f){   chkname(f.name);   chkqq(f.qq);   chkmail(f.mail);   chktel(f.tel);   chktext(f.text);   return st;}

如何用jquery进行表单验证

第一步：导入jquery.metadata.js和jquery.validate.js。第二步：在提交表单上加属性id=“tempForm"。第三步：将提交按钮改为type="button"，且加入onclick="submitForm()"属性。第四步：在script中加入方法submitForm。function submitForm() { if($("#tempForm").valid()) { $("#tempForm").submit(); } }第五步：加入验证代码，格式如下：$(function() { $("#tempForm").validate({ rules: { "cost.costMoney": { required: true, number: true, maxlength:18 } }, messages: { "cost.costMoney": { required: "《font color=’red’》成本金额不能为空《/font》", number: "《font color=’red’》成本金额必须为数字《/font》", maxlength:"《font color=’red’》成本金额长度不能大于18《/font》" } } }); });6第六步：打开浏览器查看表单验证效果。

什么是表单验证

我这有个表单验证的CHM文件我MAIL给你吧.留下你的MAIL表单的验证一直是网页设计者头痛的问题，表单验证类 Validator就是为解决这个问题而写的，旨在使设计者从纷繁复杂的表单验证中解放出来，把精力集中于网页的设计和功能上的改进上。 Validator是基于JavaScript技术的伪静态类和对象的自定义属性，可以对网页中的表单项输入进行相应的验证，允许同一页面中同时验证多个表单，熟悉接口之后也可以对特定的表单项甚至仅仅是某个字符串进行验证。因为是伪静态类，所以在调用时不需要实例化，直接以"类名+.语法+属性或方法名"来调用。此外，Validator还提供3种不同的错误提示模式，以满足不同的需要。 Validator目前可实现的验证类型有： 1.是否为空；2.中文字符；3.双字节字符4.英文；5.数字；6.整数；7.实数；8.Email地址；9.使用HTTP协议的网址；10.电话号码；11.货币；12.手机号码；13.邮政编码；14.身份证号码；15.QQ号码；16.日期；17.符合安全规则的密码；18.某项的重复值；19.两数的关系比较；20.判断输入值是否在(n, m)区间；21.输入字符长度限制(可按字节比较)；22.对于具有相同名称的单选按钮的选中判断；23.限制具有相同名称的多选按钮的选中数目；24.自定义的正则表达式验证； 运行环境(客户端)： 在Windows Server 2003下用IE6.0+SP1和Mozilla Firefox 1.0测试通过；在Lunix RedHat 9下的Netscape测试通过；

表单验证的简介

表单验证是javascript中的高级选项之一。JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 。被 JavaScript 验证的这些典型的表单数据有：用户是否已填写表单中的必填项目？用户输入的邮件地址是否合法？用户是否已输入合法的日期？用户是否在数据域(numeric field) 中输入了文本？

怎么自己写form表单验证自定义规则

实现表单自定义验证消息，实际上很简单。大体思路为:1、首先我们要设置表单的验证规则2、然后根据表单的验证规则定义要显示验证消息，3、最后通过JavaScript 和CSS相结合先将所有预定义的验证消息隐藏掉，然后再根据表单中的输入是否符合验证规则来控制验证消息的显隐状态。下面我们就来通过一个具体的示例进行讲解，你可以将这个示例直接放在浏览器中运行查看效果，但是要注意代码中引用了第三方类库jQuery，运行时你要自己设置一下：《!doctype html》《html》《head》《meta charset="utf-8" /》《title》Forms: 验证提示《/title》// 设置一些必要的样式，如验证消息的文字样式和控制验证消息显隐的样式《style》input:valid {background: #fff;}input:invalid {background: #fcc;color: #333;}.validation-messages {margin-bottom:15px;}.validation-messages span {font-size:0.8em;background-color:#eee;padding:6px;border:1px solid #ccc;border-radius:10px;color:#666;}//所有class属性为hide的元素都会被隐藏.hide {display:none;}《/style》《/head》《body》《article》《h1》Forms《span》 - 验证提示《/span》《/h1》《/article》《div id="result-stub" class="well hidden"》《form id="change-email-form" name="change-email-form"》《fieldset》《h4》修改邮箱地址《/h4》//设置表单应该遵循的验证规则。//pattern 属性：规定用于验证输入字段的模式。//maxlength 属性：规定输入字段的最大长度,以字符个数计。//required属性：规定该input元素为必须的元素。《label》用户名:《/label》《input type="text" name="username"id="username" pattern="{5,}"maxlength="30" required /》//设置表单的验证消息，并结合class属性样式将其隐藏起来《div》//这里的data-rule的属性值是HTML5表单中内置的验证规则中的一种《span data-rule="valueMissing"class="hide"》用户名不能为空.《/span》《span data-rule="patternMismatch"class="hide"》必须是字母字符(长度应为5~30个字符).《/span》《/div》《label》邮箱地址:《/label》//设置表单应该遵循的验证规则。《input type="email" name="email" id="email"title="Email address is required" required /》//设置表单的验证消息，并结合class属性样式将其隐藏起来《div》《span data-rule="valueMissing"》邮箱地址不能为空.《/span》《span data-rule="typeMismatch"》邮箱格式不正确.《/span》《/div》《hr /》//设置两个按钮，作用分别是“清空表单内容和对表单中的内容进行验证《button type="submit" id="submit"name="submit"》修改《/button》《button type="button" id="checkValidation"name="checkValidation"class="btn"》验证《/button》《/fieldset》《/form》《/div》《script》window.onload= function() {//---// 创建一个验证规则容器。var ruleNames = ;// 填充验证规则容器.// 寻找所有具有验证规则的元素，然后将该元素的data-rule属性值添加到验证规则数组中去。$("").each(function(i, element) {var ruleName = element.getAttribute(’data-rule’);if ($.inArray(ruleName, ruleNames) 《 0) {ruleNames.push(ruleName);}});var// 首先确定用户界面隐藏了所有验证消息。// 然后在选定的表单上运行验证规则。validate = function() {$(".validation-messages span").addClass(’hide’);document.getElementById(’change-email-form’).checkValidity();},// 查询每个输入的元素，以确定哪个元素无效。// 一旦检测到无效元素，就遍历验证规则，找到无效的原因，然后通过消息对用户进行提示validationFail = function(e) {varelement = e.srcElement,validity = element.validity;if (!validity.valid) {ruleNames.forEach(function(ruleName) {checkRule(validity,ruleName,element);});e.preventDefault();}},// 使用 input 元素 的ValidityState 对象的实例来运行验证规则。//如果这个验证规则返回ture，就表示无法通过验证，在表单中就会有相应的提示信息。checkRule = function(state, ruleName, ele) {if (state) {$(ele).next().find(’’).removeClass(’hide’);}};// 所有验证事件处理程序是附加在input元素上的而不是button元素$(’:input:not(:button)’).each(function() {this.oninvalid = validationFail;this.onblur = validate;});$(’#checkValidation’).click(validate);}《/script》《script src="../js/jquery.js"》《/script》《/body》《/html》

请问这是什么意思，什么叫表单验证

表单验证是javascript中的高级选项之一。

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有：

1、用户是否已填写表单中的必填项目？

2、用户输入的邮件地址是否合法？

3、用户是否已输入合法的日期？

4、用户是否在数据域(numeric field) 中输入了文本？

什么是表单验证，它的作用是什么

表单验证是javascript中的高级选项之一。JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。表单验证的作用：下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：function validate_required(field, alerttxt){ with(field){ if (value == null || value == ""){ alert(alerttxt); return false; }else { return true; } } }下面是连同 HTML 表单的代码：《html》 《head》 《script type="text/javascript"》 function validate_required(field, alerttxt) { with(field) { if (value == null || value == "") { alert(alerttxt); return false; } else { return true; } } } function validate_form(thisform) { with(thisform) { if (validate_required(email, "Email must be filled out!") == false) { email.focus(); return false; } } } 《/script》 《/head》 《body》 《form action="submitpage.htm" onsubmit="return validate_form(this)" method="post"》 Email: 《input type="text" name="email" size="30"》 《input type="submit" value="Submit"》 《/form》 《/body》 《/html》

HTML5中表单内置验证规则是什么，有哪些内置验证规则呢

在HTML5中内置了很多表单的验证规则，这些验证规则会根据用户在input元素中输入的内容返回一个布尔值来告诉我们表单验证的状态。下面我们就来列举一些我们比较常用的内置验证规则吧：ValueMising规则示例：《input type="text" required value="" 》 目的：确保表单控件(input元素在页面中是以一个控件的形式呈现的)中的值已填写。 用法：在表单控件中将required属性设置为true。因为required属性的默认值为true所以如示例中所示：在input元素中接添加required属性也是可以的。 详细说明：如果表单控件设置了required特性，那么在用户填写或者通过代码调用方式填值之前，控件会一直处于无效状态。例如，在示例中我们设置该控件的值为空，空的文本输入框无法通过必填检查，除非在其中输入任意文本。输入值为空时，valueMissing会返回true。表示没有通过验证。 typeMismatch规则示例：《input type=“url” value=“miaomiaoxue”/ 》 目的：保证控件值与预期类型相匹配(如numbe、email、URL等)。 用法： 指定表单控件的type特性值为numbe、email、URL等规定文本输入规则的类型。 详细说明: 特殊的表单控件类型不只是用来定制手机键盘,如果浏览器能够识别出来表单控件中的输入不符合对应的类型规则,比如email地址中没有@符号，或者number型控件的输入值不是有效的数字，示例中URL型的空间不是一个标准的链接格式。那么浏览器就会把这个控件标记出来以提示类型不匹配。无论哪种出错情况，typeMismatch将返回true。表示没有通过验证。patternMismatch规则示例：《input type="text" pattern=“/^+$/" value=“1234“/》 目的：根据表单控件上设置的格式规则验证输入的文本是否为有效格式 用法：在表单控件上设置pattern特性，井赋予适当的匹配规则。 详细说明：pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性后，只要输入控件的值不符合模式规则，如示例中设定的正则表达式规则该控件的值含有字母和$符号，这里设置的值为1234，不符合规则设定，因此patternMismatch就会返回true值。从引导用户和技术参考两方面考虑，你应该在包含pattern特性的表单控件中设置title特性以说明规则的作用。 tooLong规则示例：《input type=“text” maxlength=“3” value=“hello“/ 》 目的：避免输入值包含过多字符。 用法：在表单控件上设置maxLength特性。 详细说明：如果输入值的长度超过maxLength，示例中最大限制设置为3，但值为hello，操过了3个字符的限制，tooLong规则就会返回true。虽然表单控件通常会在用户输入时限制最大长度，但在有些情况下，如通过程序设置，还是会超出最大值。 rangeUnderflow规则示例：《input type=“text” min=“3” max=“5” value=“0" /》 目的：限制数值型控件的最小值。 用法：为表单控件设置min属性，并赋予允许的最小值。 详细说明：在需要做数值范围检查的表单控件中，数值很可能会暂时低于设置的下限，如示例中设置的值为0，而设置的min属性为3。此时，rangeUnderflow属性将返回true。rangeOverflow规则示例：《input type=“text” min=“3” max=“5” value=“7" /》 目的：限制数值型控件的最大值。 用法：为表单控件设置max属性，并赋予允许的最大值。 详细说明：与rangeUnderflow类似，如果一个表单控件的值比max属性值更大，如示例中设置的值为7，而设置的max属性为5。此时，rangeOverflow属性将返回true。stepMismatch规则示例：《input type=“text” min=“0” max=“100” step=“5” value=“17" /》 目的：确保输入值符合min、max及step即设置。 用法：为表单控件设置step特性，指定数值的增量。 详细说明：此约束条件用来保证数值符合min、max和step的要求。换句话说，当前值必须是最小值与step属性值的倍数之和。如示例中设置的数值范围为0到100，step特性值为5，此时就不允许出现17，而可以是“0+5*X”X为（0~20）中任意一个值皆可。否则stepMismatch返回true值。valid规则示例：《input type=“range” min=“5” max=“20” step=“5” value=“10" /》 目的：验证表单控件是否满足所有的表单验证规则 用法：适用于所有的input表单控件。 详细说明：当该表单控件满足所有验证规则时，valid属性就是true，否则，只要有一项验证规则没通过，valid属性会返回false。如示例所示就满足所有验证条件所以valid属性会返回true。注意前面几个验证属性是没有通过的情况下返回true。推荐你去教程网站秒秒学上过一遍相关知识，希望对你有帮助。

求javascript表单验证大全

JavaScript验证表单大全《script》/* 用途：校验ip地址的格式 输入：strIP：ip地址 返回：如果通过验证返回true,否则返回false； */ function isIP(strIP) { if (isNull(strIP)) return false; var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式 if(re.test(strIP)) { if( RegExp.$1 《256 && RegExp.$2《256 && RegExp.$3《256 && RegExp.$4《256) return true; } return false; } /* 用途：检查输入字符串是否为空或者全部都是空格 输入：str 返回： 如果全是空返回true,否则返回false */ function isNull( str ){ if ( str == "" ) return true; var regu = "^+$"; var re = new RegExp(regu); return re.test(str); } /* 用途：检查输入对象的值是否符合整数格式 输入：str 输入的字符串 返回：如果通过验证返回true,否则返回false */ function isInteger( str ){ var regu = /^{1,}$/; return regu.test(str); } /* 用途：检查输入手机号码是否正确 输入： s：字符串 返回： 如果通过验证返回true,否则返回false */ function checkMobile( s ){ var regu =/^{9}$/; var re = new RegExp(regu); if (re.test(s)) { return true; }else{ return false; } } /* 用途：检查输入字符串是否符合正整数格式 输入： s：字符串 返回： 如果通过验证返回true,否则返回false */ function isNumber( s ){ var regu = "^+$"; var re = new RegExp(regu); if (s.search(re) != -1) { return true; } else { return false; } } /* 用途：检查输入字符串是否是带小数的数字格式,可以是负数 输入： s：字符串 返回： 如果通过验证返回true,否则返回false */ function isDecimal( str ){ if(isInteger(str)) return true; var re = /^+(\d+)$/; if (re.test(str)) { if(RegExp.$1==0&&RegExp.$2==0) return false; return true; } else { return false; } } /* 用途：检查输入对象的值是否符合端口号格式 输入：str 输入的字符串 返回：如果通过验证返回true,否则返回false */ function isPort( str ){ return (isNumber(str) && str《65536); } /* 用途：检查输入对象的值是否符合E-Mail格式 输入：str 输入的字符串 返回：如果通过验证返回true,否则返回false */ function isEmail( str ){ var myReg = /^{2,3}$/; if(myReg.test(str)) return true; return false; } /* 用途：检查输入字符串是否符合金额格式 格式定义为带小数的正数，小数点后最多三位 输入： s：字符串 返回： 如果通过验证返回true,否则返回false */ function isMoney( s ){ var regu = "^{0,3}$"; var re = new RegExp(regu); if (re.test(s)) { return true; } else { return false; } } /* 用途：检查输入字符串是否只由英文字母和数字和下划线组成 输入： s：字符串 返回： 如果通过验证返回true,否则返回false */ function isNumberOr_Letter( s ){//判断是否是数字或字母 var regu = "^+$"; var re = new RegExp(regu); if (re.test(s)) { return true; }else{ return false; } } /* 用途：检查输入字符串是否只由英文字母和数字组成 输入： s：字符串 返回： 如果通过验证返回true,否则返回false */ function isNumberOrLetter( s ){//判断是否是数字或字母 var regu = "^+$"; var re = new RegExp(regu); if (re.test(s)) { return true; }else{ return false; } } /* 用途：检查输入字符串是否只由汉字、字母、数字组成 输入： value：字符串 返回： 如果通过验证返回true,否则返回false */ function isChinaOrNumbOrLett( s ){//判断是否是汉字、字母、数字组成 var regu = "^+$"; var re = new RegExp(regu); if (re.test(s)) { return true; }else{ return false; } } /* 用途：判断是否是日期 输入：date：日期；fmt：日期格式 返回：如果通过验证返回true,否则返回false */ function isDate( date, fmt ) { if (fmt==null) fmt="yyyyMMdd"; var yIndex = fmt.indexOf("yyyy"); if(yIndex==-1) return false; var year = date.substring(yIndex,yIndex+4); var mIndex = fmt.indexOf("MM"); if(mIndex==-1) return false; var month = date.substring(mIndex,mIndex+2); var dIndex = fmt.indexOf("dd"); if(dIndex==-1) return false; var day = date.substring(dIndex,dIndex+2); if(!isNumber(year)||year》"2100" || year《 "1900") return false; if(!isNumber(month)||month》"12" || month《 "01") return false; if(day》getMaxDay(year,month) || day《 "01") return false; return true; } function getMaxDay(year,month) { if(month==4||month==6||month==9||month==11) return "30"; if(month==2) if(year%4==0&&year%100!=0 || year%400==0) return "29"; else return "28"; return "31"; } /* 用途：字符1是否以字符串2结束 输入：str1：字符串；str2：被包含的字符串 返回：如果通过验证返回true,否则返回false */ function isLastMatch(str1,str2) { var index = str1.lastIndexOf(str2); if(str1.length==index+str2.length) return true; return false; } /* 用途：字符1是否以字符串2开始 输入：str1：字符串；str2：被包含的字符串 返回：如果通过验证返回true,否则返回false */ function isFirstMatch(str1,str2) { var index = str1.indexOf(str2); if(index==0) return true; return false; } /* 用途：字符1是包含字符串2 输入：str1：字符串；str2：被包含的字符串 返回：如果通过验证返回true,否则返回false */ function isMatch(str1,str2) { var index = str1.indexOf(str2); if(index==-1) return false; return true; } /* 用途：检查输入的起止日期是否正确，规则为两个日期的格式正确， 且结束如期》=起始日期 输入： startDate：起始日期，字符串 endDate：结束如期，字符串 返回： 如果通过验证返回true,否则返回false */ function checkTwoDate( startDate,endDate ) { if( !isDate(startDate) ) { alert("起始日期不正确!"); return false; } else if( !isDate(endDate) ) { alert("终止日期不正确!"); return false; } else if( startDate 》 endDate ) { alert("起始日期不能大于终止日期!"); return false; } return true; } /* 用途：检查输入的Email信箱格式是否正确 输入： strEmail：字符串 返回： 如果通过验证返回true,否则返回false */ function checkEmail(strEmail) { //var emailReg = /^{2,3}$/; var emailReg = /^+)+$/; if( emailReg.test(strEmail) ){ return true; }else{ alert("您输入的Email地址格式不正确！"); return false; } }/*用途：检查输入的电话号码格式是否正确输入：strPhone：字符串返回：如果通过验证返回true,否则返回false */function checkPhone( strPhone ) { var phoneRegWithArea = /^{5,10}$/; var phoneRegNoArea = /^{5,8}$/; var prompt = "您输入的电话号码不正确!"if( strPhone.length 》 9 ) {if( phoneRegWithArea.test(strPhone) ){return true; }else{alert( prompt );return false; }}else{if( phoneRegNoArea.test( strPhone ) ){return true; }else{alert( prompt );return false; }}}《/script》《form name=a onsubmit="return checkPhone(document.a.b.value);"》《INPUT TYPE="text" NAME="b"》《input type="submit" name="Submit" value="check"》《/form》