-
html 表单验证
2018-12-07 12:31:36我采用的表单验证不是使用 框架来实现,而是直接使用 html5 的新特性 1. 实现一个简单的用户名长度验证 我想实现表单验证,但是写js又太麻烦,有没有简单实用又灵活的方法 需求:用户名限制长度...因为最近在做一个项目,需要实现前端表单验证,而这些只是简单的非空和数字之类的简单验证,可能大家都听说过 jQuery Validate,但是我觉得引用 jQuery Validate 太麻烦了。
我采用的表单验证不是使用 框架来实现,而是直接使用 html5 的新特性
1. 实现一个简单的用户名长度验证
我想实现表单验证,但是写js又太麻烦,有没有简单实用又灵活的方法
需求:用户名限制长度为3至5个字符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action=""> <input type="text" pattern=".{3,5}"> 用户名 <br> <input type="submit" value="提交"> </form> </body> </html>
-
<input type="text" pattern=".{3,5}"> 用户名 <br>
-
在需要验证的元素上添加
pattern
元素就可了,验证方式为正则表达式 -
当验证不通过时会自动提示
请与所请求的格式一致
-
-
如果需要添加自定义提示,只需要添加
title
元素即可 -
<input type="text" pattern=".{3,5}" title="用户名限制3至5个字符"> 用户名 <br>
-
-
具体的验证格式还需要自己去定义…
2. 在添加
pattern
属性后,如果value没有值则不会验证input时使用pattern正则验证表单输入的内容是否合法,但是有一个问题,就是当表单的值为空的时候,并不进行验证,直接提交了
需求:怎么实现非空验证
-
在需要添加非空验证的元素上添加
required
属性 -
<input type="text" required> 用户名 <br>
-
简单的 html 表单验证就到这里了
-
-
html表单验证
2018-05-19 15:26:09表单<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title><...表单验证.html表单<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><body><form action="表单验证.html"method="post"enctype="multipart/form-data"><fieldset><legend>form表单</legend><!--在可以输入的地方加上输入提示语--><p><span>姓名:</span><!-- readonly只读--><input type="text"name="userName" placeholder="请输入你的姓名"value="张三"readonly/></p><p><span>密码:</span><input type="password"name="pwd" placeholder="请输入你的密码"/></p><p><!-- 文本域(多行文本)--><textarea name="texArea" id="" cols="30" rows="10"placeholder="请输入自我介绍最少50个字"></textarea></p><p><!-- 单选框--><input type="radio" name="gender"checked value="man"/>男<input type="radio"name="gender" value="woman"/>女<input type="radio"name="gender" value="unknow"/>不详</p><!-- 多选--><!-- 要加上name--><p><input type="checkbox"name="hobby"value="eat"checked/>吃<input type="checkbox"name="hobby"value="drink"/>喝<input type="checkbox"name="hobby"value="play"/>玩<input type="checkbox"name="hobby"value="happy"/>乐</p><!--下拉框select--><p><select name="sel" ><!-- 和option联合使用--><option value="chengdu">成都</option><option value="shanghai"selected>上海</option><option value="beijing">北京</option><option value="zhejiang">浙江</option><option value="hubei">湖北</option><option value="hunan">湖南</option></select></p><p><!-- 如果有上传文件的操作,必须将form-method该为post,并修改提交数据的格式,在form中enctype--><input type="file"name="file"/></p><p><input type="submit"value="登陆"/><input type="reset"value="取消"/><!-- 如果让某些空间不能使用则可以使用disabled--><input type="button"name="login"value="确定"disabled/></p></fieldset></form></body></html> -
HTML 表单验证
2018-05-11 17:23:42DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="textml; charset=utf-8"> <title>网页</...<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="textml; charset=utf-8"> <title>网页</title> <style type="text/css"> .hd { width:400px; height:400px; margin:auto; } .center { } </style> </head> <body> <div class="hd"> <div class="center"> <form action=""> <table> <tr> <td>用户名:</td> <td><input type="text" name="fname" /></td> </tr> <tr> <td>密码:</td> <td><input type="text" name="fname" /></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" id="id_submit" name="nm_submit" value="提交" /> <input type="button" id="id_submit" name="nm_submit" value="取消" /></td> </tr> <tr> <td colspan="2" align="center"> 您还没注册 去<font color="#FF3399">注册>>></font></td> </tr> </table> </form> </div> </div> </body> <html>
-
html表单验证自定义错误提示
2019-05-02 10:13:32原文链接:html表单验证自定义错误提示 引言 通常情况下,我们在进行表单验证时(比如提交登录注册信息),为了安全考虑以及进一步保证表单信息填写的正确性,会再服务端验证之前,在前端页面先做一次验证。但是...原文链接:html表单验证自定义错误提示
引言
通常情况下,我们在进行表单验证时(比如提交登录注册信息),为了安全考虑以及进一步保证表单信息填写的正确性,会再服务端验证之前,在前端页面先做一次验证。但是浏览器默认的表单填写错误信息并不是我们所期望的,因此需要自定义错误信息。表单如下:
<input id="username" name="username" type="text" placeholder="用户名" maxlength="10"
pattern="^[a-zA-Z][a-zA-Z0-9_]{0,}" required>
<input type="submit" value="注册">
默认的表单提示
情况1
当用户名为空时,浏览器提示如下图:
此时 input 的 validationMessage 和 validity 打印出来是:validationMessage: ‘请填写此字段。’
patternMismatch: false
valid: false
valueMissing: true这种情况我们一般不做修改;
情况2
当用户名填写 123 不符合预设正则表达式时,浏览器提示如下图:此时 input 的 validationMessage 和 validity 打印出来是:
validationMessage: ‘请与所请求的格式保持一致。’
patternMismatch: true
valid: false
valueMissing: false但我们往往想按照自己的意愿向用户提示的更精准一些,这时就需要自定义错误提示了;
情况3
当用户名填写符合预设正则表达式时:
此时 input 的 validationMessage 和 validity 打印出来是:validationMessage: ‘’
patternMismatch: false
valid: true
valueMissing: false直接跳转,也不需做处理。
自定义的表单提示
在 username input 下添加获得用户输入时运行的脚本:οninput="checkOnInput(this, 'custom tip')"
function checkOnInput(input, tip) {
input.setCustomValidity(tip);
}
情况1
当用户名为空时,浏览器提示如下图:此时 inpu t的 validationMessage 和 validity 打印出来是:
validationMessage: ‘custom tip’
patternMismatch: false
valid: false
valueMissing: true这种情况我们一般不做修改;
情况2
当用户名填写 123 不符合预设正则表达式时,浏览器提示如下图:此时 input 的 validationMessage 和 validity 打印出来是:
validationMessage: ‘custom tip’
patternMismatch: true
valid: false
valueMissing: false但我们往往想按照自己的意愿向用户提示的更精准一些,这时就需要自定义错误提示了;
情况3
当用户名填写符合预设正则表达式时,浏览器提示如下图:(与情况2相同)此时 input 的 validationMessage 和 validity 打印出来是:
validationMessage: ‘’
patternMismatch: false
valid: false
valueMissing: false不跳转,所以上述处理不正确。
自定义的表单提示,提示内容为空
在 username input 下添加获得用户输入时运行的脚本:οninput="checkOnInput(this, '')"
function checkOnInput(input, tip) {
input.setCustomValidity(tip);
}
经过测试,与默认的表单提示情况相同。综上所述
自定义错误提示,当输入框填写为空或者正确时,打印的数据和默认提示有明显区别,与我们所期望的也相差很大。
因此设置自定义错误提示可以根据 patternMismatch 的值判断,是情况1、3时,默认处理;是情况2时,自定义处理。处理办法
在 username input 下添加获得用户输入时运行的脚本:οninput="checkOnInput(this, 'custom tip')"
js方法:
function checkOnInput(input, tip) {
if (input.validity.patternMismatch === true) {
input.setCustomValidity(tip);
} else {
input.setCustomValidity('');
}
}
这样就可以只在输入错误的时候按照我们的意愿来提示啦。
原文:https://blog.csdn.net/lvlei0801/article/details/82747198
附例:
JS:
(function () {
$.extend($.fn.validatebox.defaults.rules, {
length: {
validator: function(value, param){
var len = $.trim(value).length;
return len >= param[0] && len <= param[1]
},
message: '字符长度必须介于{0}和{1}之间。'
}
});
})(jQuery);HTML:
<input id="testLength" name="testLength" validtype="length[1,20]" required="true" style="width: 150px;" type="text" value="" />
-
JavaScript 表单:验证输入,自动HTML表单验证,数据验证,约束验证
2021-03-07 15:18:24-1.JavaScript表单验证 <!DOCTYPE html> <html> <head> <script> function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == "") { alert("必须填写姓名!... -
HTML表单验证pattern
2019-10-11 17:46:21表单验证 常应用于登录界面用户名和密码的条件设置 pattern 属性规定用于验证 元素的值(正则表达式),当符合要求条件才可以提交。 示例代码: <form action="" method="get"> 输入三个英文字母 代码:... -
Pure-Javascript-Validation:HTML表单验证,并通过纯Java脚本发布到PHP页面-源码
2021-02-14 15:21:17纯Java验证 HTML表单验证并通过纯Java脚本发布到PHP页面,将localhost / CUT替换为您放置TestValidatePost.php的位置。该表单还有单选按钮,并仔细查看如何验证它,它还假定单选必须已选 -
HTML-Form-Validation-Payment:带付款HTML表单验证:此页面可模拟用于购买产品的用户信息,包括在输入信息...
2021-02-21 19:06:03HTML-Form-Validation-Payment:带付款HTML表单验证:此页面可模拟用于购买产品的用户信息,包括在输入信息和进行信用卡检查时验证格式是否正确 -
html表单验证程序
2014-08-10 10:05:44> html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type"... charset=gb2312" /> title>vForm表单验证程序title> style type="text/css"> div.info { width: 170px; overf -
HTML表单验证库SMValidator
2016-07-02 16:35:00SMValidator是一个易用、轻量且强大的表单验证工具。支持html和javascript两种配置方式,可以立即或手动触发验证,独立显示每条规则的信息,可自定义表单或信息容器的样式,可在html上写正则作为验证规则。目前... -
HTML 表单验证 (输入框的验证)
2010-12-26 19:35:21JS 只能输入数字,email的验证。。。JS 只能输入数字,email的验证。。。JS 只能输入数字,email的验证。。。 -
HTML表单验证没有反映
2015-08-11 09:22:04表单 function checkUserName (ssn) { if(ssn.length()||ssn.length()>18){ document.getElementById(usernameErr).innerHTML="请输入正确的用户名,长度为3-18"; form.username.focus(); return false; } ... -
html表单验证——正则表达式
2019-01-06 18:29:58匹配HTML标记的正则表达式:/<(.*)>.*|<(.*) />/ 匹配首尾空格的正则表达式:(^s*)|(s*$) 匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)* 匹配网址URL的正则表达式:http://([w-]+.)+[w-]+(/... -
HTML表单验证 博客园注册页面
2016-02-20 09:44:00转载于:https://www.cnblogs.com/a849788087/p/5202717.html -
Html表单验证(纯js)
2016-05-27 16:29:32html > < head > < title > 用户登录 title > < script language = "javascript" type = "text/javascript" > function sub () { var user = document.userform.user.value; var pass = ... -
html表单验证--证件类型和证件号码匹配,并验证问题
2014-07-24 15:11:25效果如图: [img=https://img-bbs.csdn.net/upload/201407/24/1406185582_63078.jpg][/img] 就是选择不同的证件类型,后面的输入框填写内容,需要验证。 因为不同证件类型的验证不一样。那么怎么实现好呢? -
java表单验证_JavaScript 表单 约束验证 HTML 输入属性
2021-03-06 02:13:45JavaScript 表单一、JavaScript 表单验证HTML 表单验证可经过 JavaScript 来完成。假如某个表单字段(fname)的值是否空值,如果是空值,就会弹出一条信息:JavaScript 示例代码function validateForm() {var x = ... -
web——表单验证
2017-09-27 07:58:24html表单验证 -
HTML5登录表单验证 Tooltip验证提示
2019-08-23 17:46:17表单验证功能非常实用,今天要分享的一款HTML5登录表单验证就非常酷,表单默认只对输入的长度作验证,你也可以自己修改正则表达式来完成更复杂的表单验证。当然这款HTML5表单验证最有优势的是他的外观,不但登录表单... -
html验证表单
2014-12-11 12:03:53HTML5 Web Form With No JavaScript in Sight,html5表单验证 不用js表单验证 -
HTML5表单验证
2020-03-23 14:49:38HTML5表单验证 表单验证的两种方式: form表单提交到后台(学习这个) 无刷新页面的ajax提交(之前做过) HTML5约束验证API willValidate属性 willValidate: 指定 input 是否需要验证 ... -
JavaScript 表单验证
2019-01-25 08:54:19HTML 表单验证也可以通过浏览器来自动完成。 如果表单字段 (fname) 的值为空, required 属性会阻止表单提交: Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。 数据验证 服务端数据验证是在数据... -
JavaScript 表单与表单验证
2018-05-13 22:32:00HTML 表单验证可以通过 JavaScript 来完成。 以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则阻止表单提交: JavaScript 实例 function validateForm() { var x = document.... -
bootstrap表单验证_使用HTML和Vuejs进行表单验证
2020-11-22 10:46:31他们说大多数网络应用只是HTML表单。好吧,表单需要验证,谢天谢地,HTML5带有许多优秀的内置表单验证功能,可用于电子邮件,数字,最大值,分钟等。您甚至可以使用模式编写自己的验证规则。在本文中,我将讨论如何...