精华内容
下载资源
问答
  • 基于Vue,ElementUI快速创建生成表单,进行数据校验,获取表单数据
  • 有哪些常见验证表单方式

    千次阅读 2019-05-28 18:29:22
    这里是修真院前端小课堂,每篇分享文从 ...有哪些常见验证表单方式(即时输入验证,失去焦点验证等),他们各自的优缺点是什么? 1.背景介绍 表单验证是javascript中的高级选项之一。JavaScript ...

    这里是修真院前端小课堂,每篇分享文从

    【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

    八个方面深度解析前端知识/技能,本篇分享的是:

    【 有哪些常见的验证表单方式】

    有哪些常见的验证表单方式(即时输入验证,失去焦点验证等),他们各自的优缺点是什么?

    1.背景介绍

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

    2.知识剖析

    我们任务里面的表单验证和用JQ插件的表单验证都可以节省我们很多的时间

    angular 表单验证

    ng-model="data.company.name"

    required

    name="name"

    ng-maxlength="50"

    ng-minlength="1"

    ng-class="{'error':data123.name.$invalid&&

    data123.name.$touched}"

    >

    公司内容不可为空

    validate的jq插件

    $( "form" ).validate({

    debug:true,  //submit  不会刷新页面  表单不会提交只是检查

    rules: {

    email: {

    email:'true',//可以这样定义email

    required: true,

    // remote:''//比较json  或者url  可以想后、端发起请求,

    remote:{

    url:'remote.json',

    type:'post',

    data:{

    loginTime:function () {

    return  +new Date;

    }

    }

    }

    },

    password: {

    //     email:'email格式不对',

    number:'true',

    required: true,

    // maxlength:10,

    // minlength:2,

    rangelength:[2,10] , //定义2-10之间的规则  定义了这个上面的 最大最小可以不用

    // max:200,

    // min:10,

    range:[10,200],

    digits:'true'//正整数

    },

    password2:{

    equalTo:'#password'

    }

    },

    messages:{

    email:{

    required:'必须填写email',

    // remote:'已经有这个email了'

    email: "请输入一个正确的邮箱",

    },

    password:{

    required:'必须填写密码',

    //                maxlength:'密码最大为10位',

    //                minlength:'密码最小为2位',

    rangelength:'用户名应该在2-10位',

    range:'请输入10-200之前的数字'

    },

    password2:{

    equalTo:'两次密码不一致'

    },

    remote:"已经有人用过了"

    },

    errorPlacement: function( error, element ) {

    error.insertAfter( element.parent() );

    },

    });

    3.常见问题

    validate的jq插件可以给disabled吗

    4.解决方案

    这个因为validate有一个提示语句就不支持这个了

    5.编码实战

    6.扩展思考

    我们不用这些插件效率就会很低,angular里面也是封装这自己的插件的

    7.参考文献

    参考一:http://javascript.ruanyifeng.com/oop/basic.html">阮一峰

    8.更多讨论

    还有其他的插件也比较好用的吗?通常是否稳定,是否经常更新?

     

    展开全文
  • vue对于表单修改数据,表单数据校验仍为修改前的数据 最近发现一个问题:表单验证,重新加载数据,用v-model赋值,但校验不成功。 例: 删除职务后校验不可为空,当点击取消的时候重新请求数据,但校验仍为请求数据...

    vue对于表单修改数据,表单数据校验仍为修改前的数据
    最近发现一个问题:表单验证,重新加载数据,用v-model赋值,但校验不成功。
    例:
    删除职务后校验不可为空,当点击取消的时候重新请求数据,但校验仍为请求数据之前的数据校验。

    编辑状态
    只读状态
    原因:
    v-model数据对于表单校验不起作用
    解决办法:
    在请求数据后对表单值进行初始化this.$refs[‘ruleForm’].resetFields();

     getuserinfo(){
          userinfo().then(res=>{
            // console.log(res)
            this.ruleForm=res.data
             //将表单值初始化
            this.$refs['ruleForm'].resetFields();
    
          })
        }
    
    展开全文
  • 主要介绍了PHP代码实现表单数据验证类,需要的朋友可以参考下
  • 主要介绍了vue实现表单数据验证的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了Angular使用ng-messages与PHP进行表单数据验证,ng-messages提供了更方便的表单数据验证服务,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 里面有各种JavaScript数据类型校验的代码, 通过添加自定义标签属性统一验证表单数据的方法。
  • HTML5的input元素验证方式包括:自动验证...一旦input元素设置了自动验证相关的属性,在表单提交时就会自动对输入内容进行校验,并对有校验不通过的信息给出相应的错误提示信息。 除了上面介绍的required和pattern属性
  • JQuery插件:表单数据校验

    千次阅读 2015-10-20 19:33:21
    jQuery Validation,最经典的表单数据校验插件(2006年开始,大量网站使用),使用简单、方便自定义和扩展。它由jQuery开发小组的一位成员(Jörn Zaefferer)开发和更新,所以应该比较可靠。 官网:...
    jQuery Validation,最经典的表单数据校验插件(2006年开始,大量网站使用),使用简单、方便自定义和扩展。它由jQuery开发小组的一位成员(Jörn Zaefferer)开发和更新,所以应该比较可靠。


    主要特性:
    • 表单提交前对所有数据进行校验,不符合不让提交(validate)
    • 如果表单校验不通过,自动focus到第一个错误的域
    • 自动在控件后面显示错误提示内容(error message)
    • 支持根据name和class进行校验(rule,addClassRules)
    • 支持远程校验(remote)
    • 容易扩展:可以方便地自定义校验规则和提示语(addMethod)
    • 支持自定义提交方式,比如AJAX方式提交(submitHandler)

    简单的使用例子:
    	<form id="loginForm">
    		<div>
    			<div>请登录:</div>
    			<div>
    				<input type="text" maxlength="20" name="userAccount" placeholder="用户名(手机号)" />
    			</div>
    			<div>
    				<input type="password" name="password" placeholder="密码" />
    			</div>
    			<div>
    				<input type="text" id="captcha" placeholder="验证码,大小写都可以"/>
    				<span id="captchaChecked" style="display:none;color:green;font-weight:bold">√</span>
    			</div>
    			<div class="captchaDiv">
    				<img class="captcha_img" id="captchaImg" alt="点击刷新验证码">看不清楚?点我!
    			</div>
    			<div>
    				<button type="submit" id="submit">登录</button>
    			</div>
    		</div>
    	</form>
    <script>
    	var captchaChecked = false;
    	
    	$(function() {
    		refreshCaptcha();
    		
    		$("#captcha").on("keyup", checkCaptchaInput);
    		$(".captchaDiv").on("click", refreshCaptcha);
    		//$("#submit").on("click", goLogin);
    		
    		//表单提交前校验
    		$("#loginForm").validate({
    			rules: {
    				userAccount: {
    					required: true,
    					mobile: true
    				},
    				password: "required"
    			},
    			submitHandler: function(form) {
    				goLogin();
      			}
    		});
    	});
    </script>

    自定义校验规则和提示语:
    比如:
      
    jQuery.validator.addMethod("laxEmail", function(value, element) {
    // allow any non-whitespace characters as the host part
    returnthis.optional( element ) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@(?:\S{1,63})$/.test( value );
    }, 'Please enter a valid email address.');
    参考:

    根据class进行校验:
          
    // alias required to cRequired with new message
    $.validator.addMethod("cRequired", $.validator.methods.required,
    "Customer name required");
    // alias minlength, too
    $.validator.addMethod("cMinlength", $.validator.methods.minlength,
    // leverage parameter replacement for minlength, {0} gets replaced with 2
    $.validator.format("Customer name must have at least {0} characters"));
    // combine them both, including the parameter for minlength
    $.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });
      
    <inputname="customer1"class="customer">
    <inputname="customer2"class="customer">
    <inputname="customer3"class="customer">

    展开全文
  • SpringBoot服务端表单数据校验

    千次阅读 2018-05-16 20:19:29
    SpringBoot服务端表单数据校验(SpringBoot高级)一、 实现添加用户功能1 创建项目2 修改POM文件&lt;project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="... xsi...

    SpringBoot服务端表单数据校验

    (SpringBoot高级)

    一、         实现添加用户功能

    1         创建项目

    2         修改POM文件

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

        xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

        <modelVersion>4.0.0</modelVersion>

        <parent>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-parent</artifactId>

            <version>1.5.10.RELEASE</version>

        </parent>

        <groupId>com.bjsxt</groupId>

        <artifactId>13-spring-boot-validate</artifactId>

        <version>0.0.1-SNAPSHOT</version>

     

        <properties>

            <java.version>1.7</java.version>

            <thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>

            <thymeleaf-layout-dialect.version>2.0.4</thymeleaf-layout-dialect.version>

        </properties>

     

        <dependencies>

            <!-- springBoot的启动器 -->

            <dependency>

                <groupId>org.springframework.boot</groupId>

                <artifactId>spring-boot-starter-web</artifactId>

            </dependency>

            <!-- thymeleaf的启动器 -->

            <dependency>

                <groupId>org.springframework.boot</groupId>

                <artifactId>spring-boot-starter-thymeleaf</artifactId>

            </dependency>

        </dependencies>

    </project>

     

    3         编写添加用户功能

    3.1     创建实体类

    publicclass Users {

        private String name;

        private String password;

        private Integer age;

        public String getName() {

            returnname;

        }

        publicvoid setName(String name) {

            this.name = name;

        }

        public String getPassword() {

            returnpassword;

        }

        publicvoid setPassword(String password) {

            this.password = password;

        }

        public Integer getAge() {

            returnage;

        }

        publicvoid setAge(Integer age) {

            this.age = age;

        }

        @Override

        public String toString() {

            return"Users [name=" + name + ", password=" + password + ", age=" + age + "]";

        }

       

    }

     

     

    3.2     编写Controller

    /**

     * SpringBoot 表单数据校验

     *

     *

     */

    @Controller

    publicclass UsersController {

     

        @RequestMapping("/addUser")

        public String showPage(){

            return"add";

        }

       

        /**

         * 完成用户添加

         */

        @RequestMapping("/save")

        public String saveUser(Users users){

            System.out.println(users);

            return"ok";

        }

    }

     

     

    3.3     编写页面add.html  ok.html

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>添加用户</title>

    </head>

    <body>

        <form th:action="@{/save}" method="post">

            用户姓名:<input type="text" name="name"/><br/>

            用户密码:<input type="password" name="password" /><br/>

            用户年龄:<input type="text" name="age" /><br/>

            <input type="submit" value="OK"/>

        </form>

    </body>

    </html>

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>操作成功</title>

    </head>

    <body>

        OK。。。。

    </body>

    </html>

     

     

    二、         SpringBoot对表单做数据校验

    1         SpringBoot对表单数据校验的技术特点

    1.1     SpringBoot中使用了Hibernate-validate校验框架

    2         SpringBoot表单数据校验步骤

    2.1     在实体类中添加校验规则

    publicclass Users {

        @NotBlank//非空校验

        private String name;

        @NotBlank//密码非空校验

        private String password;

        private Integer age;

        public String getName() {

            returnname;

        }

        publicvoid setName(String name) {

            this.name = name;

        }

        public String getPassword() {

            returnpassword;

        }

        publicvoid setPassword(String password) {

            this.password = password;

        }

        public Integer getAge() {

            returnage;

        }

        publicvoid setAge(Integer age) {

            this.age = age;

        }

        @Override

        public String toString() {

            return"Users [name=" + name + ", password=" + password + ", age=" + age + "]";

        }

       

    }

     

    2.2     在Controller中开启校验

    /**

         * 完成用户添加

         *@Valid开启对Users对象的数据校验

         *BindingResult:封装了校验的结果

         */

        @RequestMapping("/save")

        public String saveUser(@Valid Users users,BindingResult result){

            if(result.hasErrors()){

                return"add";

            }

            System.out.println(users);

            return"ok";

        }

    2.3     在页面中获取提示信息

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>添加用户</title>

    </head>

    <body>

        <form th:action="@{/save}" method="post">

            用户姓名:<input type="text" name="name"/><font color="red" th:errors="${users.name}"></font><br/>

            用户密码:<input type="password" name="password" /><font color="red" th:errors="${users.password}"></font><br/>

            用户年龄:<input type="text" name="age" /><font color="red" th:errors="${users.age}"></font><br/>

            <input type="submit" value="OK"/>

        </form>

    </body>

    </html>

    2.4     遇到异常

    jsp当中,如果一个对象根本不存在,那么他仍然可以在jsp页面进行遍历,只不过为空,不显示而已,但是在thymeleaf当中,如果说这个对象不存在,他就会报以下错误,解决问题的办法就是在controller中的方法上的传递参数加上这个对象,以便在thymeleaf视图层当中,告知这个对象是存在于的

     

    三、         解决数据校验时的异常问题

    解决异常的方法,在跳转页面的方法中注入一个对象,来解决问题。要求参数对象的变量名必须是对象的类名的全称首字母小写。

     

    springboot 1.5当中,参数变量必须是对象类的名称首字母小写,但是在springboot2.0以上,已经很大程度上优化了这个问题,变量名称随便写,因为在跳转页面的时候,将该对象放入到Model当中传递,他的key 就是对象的类的全程首字母大写(默认),在thymeleaf当中取出这个值的时候,他的key为对象的类的全程首字母大写,与参数的变量名无任何关系

     

    如果非要更改Model当中的key值,一下有详解

     

    代码

    /**

         * 解决异常的方式。可以在跳转页面的方法中注入一个Uesrs对象。

         * 注意:由于springmvc会将该对象放入到Model中传递。key的名称会使用该对象的驼峰式的命名规则来作为key。

         * 参数的变量名需要与对象的名称相同。将首字母小写。

         *

         * @param users

         * @return

         */

        @RequestMapping("/addUser")

        public String showPage( Users users){

            return"add";

        }

    /**

         * 完成用户添加

         *@Valid开启对Users对象的数据校验

         *BindingResult:封装了校验的结果

         */

        @RequestMapping("/save")

        public String saveUser( @Valid Users users,BindingResult result){

            if(result.hasErrors()){

                return"add";

            }

            System.out.println(users);

            return"ok";

        }

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>添加用户</title>

    </head>

    <body>

        <form th:action="@{/save}" method="post">

            用户姓名:<input type="text" name="name"/><font color="red" th:errors="${users.name}"></font><br/>

            用户密码:<input type="password" name="password" /><font color="red" th:errors="${users.password}"></font><br/>

            用户年龄:<input type="text" name="age" /><font color="red" th:errors="${users.age}"></font><br/>

            <input type="submit" value="OK"/>

        </form>

    </body>

    </html>

     

    如果参数的名称需要做改变

     

        /**

         *

         * 如果想为传递的对象更改名称,可以使用@ModelAttribute("aa")这表示当前传递的对象的key为aa

         * 那么我们在页面中获取该对象的key也需要修改为aa

         * @param users

         * @return

         */

        @RequestMapping("/addUser")

        public String showPage(@ModelAttribute("aa") Users users){

            return"add";

        }

    /**

         * 完成用户添加

         *@Valid开启对Users对象的数据校验

         *BindingResult:封装了校验的结果

         */

        @RequestMapping("/save")

        public String saveUser(@ModelAttribute("aa") @Valid Users users,BindingResult result){

            if(result.hasErrors()){

                return"add";

            }

            System.out.println(users);

            return"ok";

        }

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>添加用户</title>

    </head>

    <body>

        <form th:action="@{/save}" method="post">

            用户姓名:<input type="text" name="name"/><font color="red" th:errors="${aa.name}"></font><br/>

            用户密码:<input type="password" name="password" /><font color="red" th:errors="${aa.password}"></font><br/>

            用户年龄:<input type="text" name="age" /><font color="red" th:errors="${aa.age}"></font><br/>

            <input type="submit" value="OK"/>

        </form>

    </body>

    </html>

     

    四、         其他校验规则

    @NotBlank: 判断字符串是否为null或者是空串(去掉首尾空格)。

    @NotEmpty: 判断字符串是否null或者是空串。

    @Length: 判断字符的长度(最大或者最小)

    @Min: 判断数值最小值

    @Max: 判断数值最大值

    @Email: 判断邮箱是否合法

     

     

     

     

     

    展开全文
  • 介绍了PHP代码实现表单数据验证类,比如检查输入内容的合法性,中英文判断,字符串长度是否符合要求,验证手机号,电子邮箱,生成缩略图,获取IP地址,抓取远程图片,这是一个很全面的表单验证类,几乎所有的验证都...
  • validate-formdata 用于验证表单数据的数据结构
  • 前台表单数据验证

    千次阅读 2015-08-27 10:24:13
    前台表单数据验证有两个方法: 第一种JS验证: function chkinput(form){ var reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; if(!(reg.test(form.email.value))) { alert("请输入正确的邮箱格式!...
  • ext_表单提交_数据校验 ext_表单提交_数据校验
  • flex 表单数据合法性验证flex 表单数据合法性验证flex 表单数据合法性验证flex 表单数据合法性验证
  • 在现在的网站开发过程中,对表单数据进行验证是非常必须的,通过Js将表单数据在客户端进行校验验证不仅速度很快,而且还有一个更大的好处就是缓解服务器压力。如果我们不在客户端进行数据校验,无论什么数据全部都...
  • 一、el-form上添加rules,el-form-item添加prop,prop中的字段对应v-model中的字段 二、return底下进行校验========required---非空校验,trigger----失去焦点校验 结果如下图 ...
  • 常用表单数据验证JS

    2009-02-11 21:18:46
    里面包含了一些对于页面表单常用的数据验证
  • 在Struts 2.0中实现表单数据校验
  • vue+iview表单,在添加和编辑,我们定义两个data formData: {}, defaultForm: { sdId: '', parentSdId: '', ...在我们需要清空表单数据校验规则, this.$refs.formData.resetFields(); 并重...
  • 表单数据校验前言前端页面测试 前言 在前面的文章中我们并没有对表单提交的数据做校验,本文主要以添加用户为例介绍如何对表单数据添加校验。 前端页面 首先把原先的提交按钮换掉,设置一个点击函数 为表单数据添加...
  • 在进行年度预算编制时,用户提出将预算数据进行分解时,加入表单数据验证的需求,即在预算数据分解时,分解后数据之和要满足与预算总数指定的逻辑关系,数据才能写入essbase数据库,否则,在该表单弹出提示信息,...
  • form表单验证对表中数据校验

    千次阅读 2018-08-08 08:47:22
    form表单验证时对表中数据校验 在做项目时,被要求当添加表时,要对非主键的编号进行校验,当为空时,提示空值;非空但与数据库重复时,提示已存在。 使用rules和message 在form.validate中,提交时,我们...
  • 【有哪些常见验证表单方式,他们各自的优缺点是什么?】 这里是修真院前端小课堂,每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面...
  • 我们之前写的代码都没有对前端input框输入的数据验证,我们今天来看下,如果做form表单数据验证 在views文件做验证 首先用文字描述一下流程 1、在views文件中导入forms模块 2、然后创建一个类,继承forms.form...
  • javascript验证form表单数据的案例

    千次阅读 2019-03-15 19:11:46
    javascript验证form表单数据的案例 直接po截图和代码 下面是CheckFormDemo.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt...
  • 使用struts2表单数据校验功能

    千次阅读 2007-05-06 22:56:00
    上篇文章《使用struts2实现crud操作》中并未涉及数据有效性的验证,struts2也提供了一套验证框架,下面我们就体验一下struts的表单数据校验功能。 struts2校验框架的使用,并不需要在struts配置文件中配置,有点ror...
  • 前端UI框架与async-validator介绍 VantUI是一款有赞出品的基于Vue的前端手机端开发框架 ...async-validator是一款基于js的异步数据校验插件(当前github上已有117k个仓库使用了async-validator) asy...
  • form表单验证是几乎所有web项目或者APP都会遇到的,那么通常遇到的表单验证情况主要分为以下三种: 1.form表单中的表单项项都是写死的 意思是说,表单项不是根据动态数据加载出来的。那么只需要写好对应的验证规则...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 215,584
精华内容 86,233
关键字:

常见的表单数据验证方式