精华内容
下载资源
问答
  • 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
    表单&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;...表单验证.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:42
    DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="textml; charset=utf-8"&gt; &lt;title&gt;网页&lt;/...
     <!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
    当用户名为空时,浏览器提示如下图:

    默认情况1
    此时 input 的 validationMessage 和 validity 打印出来是:

    validationMessage: ‘请填写此字段。’
    patternMismatch: false
    valid: false
    valueMissing: true

    这种情况我们一般不做修改;

    情况2
    当用户名填写 123 不符合预设正则表达式时,浏览器提示如下图:

    默认情况2

    此时 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="" />

    展开全文
  • -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"> 输入三个英文字母 代码:...
  • 纯Java验证 HTML表单验证并通过纯Java脚本发布到PHP页面,将localhost / CUT替换为您放置TestValidatePost.php的位置。该表单还有单选按钮,并仔细查看如何验证它,它还假定单选必须已选
  • HTML-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
  • SMValidator是一个易用、轻量且强大的表单验证工具。支持html和javascript两种配置方式,可以立即或手动触发验证,独立显示每条规则的信息,可自定义表单或信息容器的样式,可在html上写正则作为验证规则。目前...
  • JS 只能输入数字,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:32
    html > < head > < title > 用户登录 title > < script language = "javascript" type = "text/javascript" > function sub () { var user = document.userform.user.value; var pass = ...
  • 效果如图: [img=https://img-bbs.csdn.net/upload/201407/24/1406185582_63078.jpg][/img] 就是选择不同的证件类型,后面的输入框填写内容,需要验证。 因为不同证件类型的验证不一样。那么怎么实现好呢?
  • JavaScript 表单一、JavaScript 表单验证HTML 表单验证可经过 JavaScript 来完成。假如某个表单字段(fname)的值是否空值,如果是空值,就会弹出一条信息:JavaScript 示例代码function validateForm() {var x = ...
  • web——表单验证

    2017-09-27 07:58:24
    html表单验证
  • 表单验证功能非常实用,今天要分享的一款HTML5登录表单验证就非常酷,表单默认只对输入的长度作验证,你也可以自己修改正则表达式来完成更复杂的表单验证。当然这款HTML5表单验证最有优势的是他的外观,不但登录表单...
  • html验证表单

    2014-12-11 12:03:53
    HTML5 Web Form With No JavaScript in Sight,html5表单验证 不用js表单验证
  • HTML5表单验证

    2020-03-23 14:49:38
    HTML5表单验证 表单验证的两种方式: form表单提交到后台(学习这个) 无刷新页面的ajax提交(之前做过) HTML5约束验证API willValidate属性 willValidate: 指定 input 是否需要验证 ...
  • JavaScript 表单验证

    2019-01-25 08:54:19
    HTML 表单验证也可以通过浏览器来自动完成。 如果表单字段 (fname) 的值为空, required 属性会阻止表单提交: Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。 数据验证 服务端数据验证是在数据...
  • HTML 表单验证可以通过 JavaScript 来完成。 以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则阻止表单提交: JavaScript 实例 function validateForm() { var x = document....
  • 他们说大多数网络应用只是HTML表单。好吧,表单需要验证,谢天谢地,HTML5带有许多优秀的内置表单验证功能,可用于电子邮件,数字,最大值,分钟等。您甚至可以使用模式编写自己的验证规则。在本文中,我将讨论如何...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,333
精华内容 3,333
关键字:

html表单验证