精华内容
下载资源
问答
  • 【vue】element-ui的form数组表单验证(循环表单验证
    千次阅读
    2022-03-30 16:01:34

    基于vue2.0element-uiform表单验证比较简单,但是有些同学可能对于数组类型的表单验证无从下手,这里我基于一个我自己项目中的例子,展示一下怎么进行数组的表单验证。

    项目截图:

    在这里插入图片描述

    上代码,为了让大家看起来比较清晰,我删掉了无关的代码:

    <template>
    <div class="create_send">
       <el-form ref="refForm" :model="formData" :rules="rules">
            <el-form-item label="选择事件:" prop="eventCode">
                <el-select v-model="formData.eventCode" placeholder="请选择">
                    <el-option
                    v-for="item in eventoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-form  v-for="(item,index) in formData.ruleList" :ref="`refForm${index}`" :key="index" :model="item" :rules="rules">
            <el-form-item label="倒计时天数:" prop="ruleString" class="err_position">
                <el-input v-model="item.ruleString" style="width:207px;float:left" placeholder="请输入内容"></el-input>
            </el-form-item>
        </el-form>
    </div>
    </template>
    <script>
    import { sysDictMoreType } from '@/api/neo/shareHouse'
    export default {
        data(){
            return {
                formData:{
                    eventCode:"",
                    eventName:"",
                    ruleList:[
                        {
                            ruleString:""
                        }
                    ]
                },
                eventoptions:[],
                rules:{
                    eventCode:[{required:true,message:"请选择事件类型",trigger:"change"}],
                    ruleString:[{required:true,message:"请填写倒计时天数",trigger:"blur"}],
                }
            }
        },
        mounted(){
            this.getSelectData()
        },
        methods:{
            confirm(){
                Promise.all([
                    this.validateForm("refForm"),
                    ...this.formData.ruleList.map((item,index)=>this.validateForm(`refForm${index}`))
                ]).then(res=>{
                    if(res) {
                        // 表单验证通过
                    }
                })
            },
            validateForm(refs){
                let valiForm = this.$refs?.[refs].validate?this.$refs?.[refs]:this.$refs?.[refs][0]
                return new Promise((resolve,reject)=>{
                    valiForm.validate(res=>{
                        if(res) resolve()
                        else reject()
                    })
                })
            },
            getSelectData(){//获取下拉选择框列表
                sysDictMoreType(["im_event_code"]).then(res=>{
                    this.eventoptions = res?.data?.im_event_code||[]
                })
            },
            addEvent(){//新增一条发送时间
                this.formData.ruleList.push({
                    ruleString:""
                })
            },
            deleteEvent(){//删除一条发送时间,忽略},
        },
    }
    </script>
    <style lang="scss">
    //节省篇幅,删掉了css
    </style>
    

    咱们把数组验证的部分拿出来看:

    <el-form  v-for="(item,index) in formData.ruleList"  :key="index" :model="item" :rules="rules">
         <el-form-item label="倒计时天数:" prop="ruleString" class="err_position">
             <el-input v-model="item.ruleString" style="width:207px;float:left" placeholder="请输入内容"></el-input>
         </el-form-item>
     </el-form>
    

    上边代码最关键的地方就是:

    :ref="`refForm${index}`"
    

    因为ref不能相同,咱们取到index用来拼接不同的ref字符串。
    然后在表单验证的时候就可以循环的进行获取refs并验证了,下面这俩函数大家可以直接复制一下拿去用,保证有用:

    confirm(){
         //用Promise.all进行全部form表单的验证
         Promise.all([
             //非数组部分的表单
             this.validateForm("refForm"),
             //数组部分的表单,用map返回验证函数的调用
             ...this.formData.ruleList.map((item,index)=>this.validateForm(`refForm${index}`))
         ]).then(res=>{
             if(res) {
                 // 全部表单验证通过
             }
         })
     },
     validateForm(refs){
     	  //获取到form表单的dom,如果是对象直接拿到,如果是数组,就拿第一个
     	  //elementui对循环的form包装成了数组
         let valiForm = this.$refs?.[refs].validate?this.$refs?.[refs]:this.$refs?.[refs][0]
         return new Promise((resolve,reject)=>{
             //在Promise里进行验证,如果通过就resolve()
             valiForm.validate(res=>{
                 if(res) resolve()
                 else reject()
             })
         })
     },
    

    有帮助的话,点个赞呗!

    上一篇:nodejs如何读取并修改文件内容?
    下一篇:js发布-订阅模式(观察者模式)

    更多相关内容
  • 主要介绍了vue+ element ui 表单验证有值但验证失败,本文通过实例代码给大家分享解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 移动端表单验证

    2018-10-28 10:33:24
    在MUI构建的移动端表单中,pc端的网页表单验证器不支持移动端验证
  • 主要介绍了动态表单验证的操作方法和TP框架里面的ajax表单验证问题,需要的朋友可以参考下
  • 源码包括: 1、django的原生Form表单数据验证。 2、Ajax方式的Form表单数据验证
  • 全网最全的 表单验证, js表单验证,form表单验证,前端验证,简介验证 email URL 登陆验证
  • 在平常的页面当中,我们经常用到表单和表单验证表单验证是数据进入数据库前一次在客户机利用脚本检查数据类型的行为。作为一个初学者,在这里贴下我的菜鸟代码。
  • Easyform表单验证插件

    热门讨论 2016-02-20 17:02:08
    Easyform表单验证插件:http://blog.csdn.net/libin_1/article/details/50705331
  • element-plus表单验证使用 个人总结

    千次阅读 2021-10-18 09:17:30
    表单验证能通过设置验证规则验证用户的输入,并对不规范的输入做出对应提示。element-plus(包括element-ui)都提供了表单验证功能。但官网上只有最基本的使用方法,详细使用需要参考async-validator,element-plus...

    前言

    表单验证能通过设置验证规则验证用户的输入,并对不规范的输入做出对应提示。element-plus(包括element-ui)都提供了表单验证功能。但官网上只有最基本的使用方法,详细使用需要参考async-validator,element-plus表单验证就是通过它实现的

    Element-Plus-Form - 表单验证
    async-validator - Git
    async-validator - Gitee


    一、表单验证基本使用

    1、定义验证规则

    baseRules: {
      name:[{ required: true, message: '请输入医生名称', trigger: 'blur' }],
      title: [{ required: true, message: '请选择职称', trigger: 'change' }],
      gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
      hospital: [{ required: true, message: '请选择医院', trigger: 'change' }]
    },
    

    2、绑定 表单 与 Rules

    <el-form :model="formData" :rules="baseRules" ref="baseForm"></el-form>

    3、绑定 Item 与 Rule

    上一步已经为表单绑定了规则列表baseRules,接下来,只需要在form-item中使用prop绑定验证规则即可

    <el-form-item label="名称" prop="name"></el-form-item>

    对应关系:
    表单对象formData: { name: '' }
    表单元素prop="name"
    规则列表baseRules: { name: [{...}] }

    4、示例

    <template>
    	<el-form :inline="true" :model="doctorDialogForm" size="small" :rules="baseRules" ref="baseForm">
    		<el-form-item label="医生名称" prop="name">
    	      <el-input v-model="doctorDialogForm.name"></el-input>
    	    </el-form-item>
    		<!-- ... -->
    		<template #footer>
    		  <span class="dialog-footer">
    		    <el-button @click="cancelOperation()">取 消</el-button>
    		    <el-button type="primary" @click="confirmOperation()">确 定</el-button>
    		  </span>
    		</template>
    	</el-form>
    </template>
    
    <script>
    export default {
      name: 'Doctor',
      data() {
        return {
    		doctorDialogForm: {       // 模态框 - 医生信息
    		  no: '',                 // 医生编号
    		  name: '',               // 医生名称
    		  title: '',              // 医生职称
    		  gender: '',             // 性别
    		  hospital: '',           // 所在医院
    		},
    		basicRules: {
    		  name:[{ required: true, message: '请输入医生名称', trigger: 'blur' }],
    		  title: [{ required: true, message: '请选择职称', trigger: 'change' }],
    		  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
    		  hospital: [{ required: true, message: '请选择医院', trigger: 'change' }]
    		},
    	}
      },
      methods: {
      	confirmOperation() {
      		this.$refs.baseForm.validate((valid) => {
      			if(!valid) {
      				this.$message.warning('请调整数据后再请求')
      				return false
      			}
      			// operation code
      		})
      	}
      }
    }
    </script>
    

    二、基本API(可先跳过)

    async-validator - Git
    async-validator - Gitee

    1、async-validator

    Rules API:

    • type: 指示要使用的验证器类型
      type: string, number, boolean, method, regexp, integer, float, array, object, enum, date, url, hex, email, any
    • Required
      required:必填/非必填
    • Messages
      message: 错误提示
    • Pattern
      pattern: 值需校验通过的正则表达式
    • Range
      min, max: type为array, string时,指长度。为number时,指大小
    • Length
      len: type为array, string时,指长度。为number时,指值
    • Enumerable
      enum: 例:{ type: 'enum', enum: ['admin', 'user', 'guest'] }
    • Whitespace
    • Deep Rules 对象的深层规则
      fields: 对象的属性名,数组的下标
      defaultField: 应用于对象、数组内的所有成员
    • Transform
      transform: 方法,对值的预处理
    • validator
      validator: 自定义验证方法
    • asyncValidator
      asyncValidator: 自定义异步验证方法

    2、element-plus

    trigger: 触发验证的方法,值可用字符串’blur’, ‘change’,也可是数组[‘blur’, ‘change’],默认是全部

    注意,规则数组是按序逐一被执行验证的(trigger='blur’时,更改input框的值不会触发验证)

    三、进阶使用

    1、单项验证

    可在表单的项 ( < el-form-item > ) 中单独设置验证规则

    <el-form-item label="邮箱:" prop="email"
      :rules="[{ type: 'email', message: '邮箱格式错误', trigger: 'change' }]"
    ></el-form-item>
    

    2、自定义表单验证

    可使用validator设置自定义的表单验证方法

    <el-form-item label="支付方式:" prop="payTypes"></el-form-item>
    
    data() {
    	return {
    		basicRules: {
    			payTypes: [{ validator: this.validateOrderPayTypes, trigger: 'change' }]
    		}
    	}
    }
    methods: {
        validateOrderPayTypes(rule, value, callback) { // 验证支付方式
          if(!value || value.length == 0) { // 自定义验证条件,返回错误提示文字
            callback(new Error('请添加支付方式'))
          } else {
            callback()
          }
        },
    }
    

    为了代码的可维护性与美观,尽量不要将规则写在模板中。但某些情况下必须如此,比如,当需要额外传递参数给validator时:

    <el-form-item label="样本类型:" prop="sampType"
    	:rules="[{ validator: (rule, value, cb) => validateSampType(rule, value, cb, yourParams), trigger: 'change' }]"
    ></el-form-item>
    

    3、正则校验

    element plus采用的 async-validator 提供了很多高级用法,可以使用 pattern 指定校验的正则

    regex.js:

    // 手机号或座机号
    export const reg_tel_phone = /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/
    

    doctor.vue:

    import { reg_tel_phone } from '@/assets/regex'
    
    baseRules: {
      name: [{ required: true, message: '请输入医生名称', trigger: 'blur' }],
      title: [{ required: true, message: '请选择职称', trigger: 'change' }],
      tel: [{ pattern: reg_tel_phone, message: '请输入正确的手机号或座机号', trigger: ['blur', 'change'] }]
    },
    

    注意:直接在vue模板中进行单项验证使用正则校验时,需将RegExp定义在data(){return{}}

    4、深层(嵌套)规则

    可通过嵌套规则校验object、array,具体参数配置请参考 async-validator#deep-rules

    使用fields定位到对象address的属性:
    在这里插入图片描述
    使用defaultField为数组元素设置校验规则:
    在这里插入图片描述
    使用下标为对应数组元素设置校验规则:
    在这里插入图片描述

    实例1:

    baseRules: {
    	CCEmails: [{
    		type: 'array',
    		defaultField: { type: 'email', message: '请输入正确的邮箱地址' }
    	}]
    }
    

    实例2:

    import { reg_tel_phone } from '@/assets/regex'
    

    表单数据

    regTelPhone: reg_tel_phone,
    formBaseInfo: {         // 表单对象
    	noMail: false,      // 不邮寄
    	formMails: [{       // 地址列表
    		reciever: '',   // 收件人
            recieveTel: '', // 收件号码
            address: {      // 收件地址
              area: [],     // 地址区划列表
              detail: ''    // 地址详情
            }
    	}]
    }
    

    验证

    <el-form :model="formBaseInfo" size="mini" :rules="basicRules" ref="ruleBasicForm">
    	<!-- 5、邮寄信息 -->
    	<el-form-item
    	  label="邮寄信息"
    	  prop="formMails"
    	  :rules="[{
    	    type: 'array',
    	    required: !formBaseInfo.noMail,
    	    defaultField: {
    	      type: 'object',
    	      fields: {
    	        reciever: { required: true, message: '请输入收件人' },
    	        recieveTel: [
    	        	{ required: true, message: '请输入收件人电话' },
    	        	{ pattern: regTelPhone, message: '电话格式不正确'}
    	        ],
    	        address: {
    	          type: 'object',
    	          required: true,
    	          message: '请输入地址信息',
    	          fields: {
    	            area: {
    	              type: 'array',
    	              required: true,
    	              len: 3,
    	              message: '请选择地址区划',
    	              defaultField: { required: true, message: '缺少区域码' }
    	            },
    	            detail: { required: true, message: '请输入详细地址' }
    	          }
    	        }
    	      }
    	    }
    	  }]"
    	>
    		<!-- ... -->
    	</el-form-item>
    </el-form>
    

    上例仅作为示例。检测结果只是邮寄信息的。如果想要更详细的提示,需拆分嵌套规则。
    如下图,提示位置始终在邮寄信息对应的内容下方,错误也无法定位:
    在这里插入图片描述

    5、验证数组内属性值

    即,绑定的表单属性为数组内属性值时
    如下所示,表单中有多个产品,每个产品中有多个样本,需要验证的有产品编号、样本编号、样本用户等

    formData: {
    	no: null,
    	products: [{          // 产品
    		no: null,
    		remark: '',
    		key: null,
    		samples: [{       // 样本
    			no: null,
    			user: null,
    			key: null,
    		}]
    	}]
    }
    

    prop需要通过字符串拼接指定绑定的属性
    在下面实例中,使用:prop="'formData['+idx+'].no'",而不使用prop="product.no"

    <el-card v-for="(product,idx) in formData.products" :key="product.key">
    	<!-- 产品 -->
    	<el-form-item label="选择产品:" :prop="'formData['+idx+'].no'"
           :rules="[{ required: true, trigger: 'change', message: '请选择产品' }]"
    	>
         	<el-select v-model="product.no" placeholder="请选择产品">...</el-select>
    	</el-form-item>
    	<el-form-item label="产品备注:">...</el-form-item>
    
    	<!-- 样本 -->
    	<el-card v-for="(sample,idx1) in product.samples" :key="sample.key">
    		<el-form-item label="选择用户:" :prop="'formData['+idx+'].samples['+idx1+'].user'"
              :rules="[{ required: true, trigger: 'change', message: '请选择用户' }]"
            >
              <el-select v-model="sample.user" placeholder="请选择用户">...</el-select>
            </el-form-item>
    	</el-card>
    	<el-form-item label="添加样本" label-width="0">...</el-form-item>
    </el-card>
    

    校验的对象为数组内属性值时,暂未找到直接在rules中定义的方法,所以,只能先以单项验证的方式写了

    6、异步自定义validator

    当自定义validator中存在异步校验时,validator无法正确实现校验,需要使用asyncValidator。提交前的手动验证写法也有所不同

    import { reg_tel_phone } from '@/assets/regex'
    import { checkTelExistence } from '@/api/common'
    
    data() {
      return {
    	baseRules: {
    	  tel: [
    		{ required: true, message: '请输入电话' },
    		{ pattern: reg_tel_phone, message: '电话格式不正确' },
    		{ asyncValidator: this.validateTel, trigger: 'change' }
    	  ]
    	},
      }
    },
    methods: {
      // 电话唯一性校验
      async validateTel(rule, value, callback) {
        await checkTelExistence(this.salerDialogForm.tel).then(res => {
          callback()
        }).catch(e => {
          callback(new Error(e.message || e.msg || e))
        })
      },
      // 确认新增
      confirmOperation(formName) {
        this.$refs[formName].validate().then(() => {
    	  // validation passed or without error message
        }).catch(e => {
          return false
        })
      }
    }
    

    总结

    本文仅为个人开发、学习中的总结,欢迎在评论区讨论。如有错误,还望指正!

    展开全文
  • jquery 表单验证大全并以弹出形式提示信息
  • JS注册表单验证

    2012-10-15 01:30:43
    网上常见的用JS编写的注册表单验证的代码,非常实用哦
  • Jquery validate表单验证Demo下载

    热门讨论 2013-09-23 10:58:00
    jquery validate表单验证插件制作用户注册页面表单提交验证,用户名、手机、密码、邮箱等表单验证。通过这款validate表单验证插件能制作多种表单提交验证。
  • jQuery Validate表单验证实例

    热门讨论 2016-05-26 07:52:31
    实例是用jQuery的validate插件做的登陆表单验证,效果还不错,代码部分可以参见我写的这篇博客:http://blog.csdn.net/eson_15/article/details/51497533
  • Laravel表单验证,验证规则

    千次阅读 2019-12-11 17:22:03
    1 表单校验 检查应用程序的基底控制器 (App\Http\Controllers\Controller) 类你会看到这个类使用了 ValidatesRequests trait。这个 trait 在你所有的控制器里提供了方便的 validate 验证方法。 validate 方法会接收 ...

    1 表单校验

    检查应用程序的基底控制器 (App\Http\Controllers\Controller) 类你会看到这个类使用了 ValidatesRequests trait。这个 trait 在你所有的控制器里提供了方便的 validate 验证方法。

    validate 方法会接收 HTTP 传入的请求以及验证的规则。如果验证通过,你的代码就可以正常的运行。若验证失败,则会抛出异常错误消息并自动将其返回给用户。在一般的 HTTP 请求下,都会生成一个重定向响应,对于 AJAX 请求则会发送 JSON 响应。

    \vendor\laravel\framework\src\Illuminate\Foundation\Validation\ValidatesRequests.php

    public function validate(Request $request, array $rules, array $messages = [], array $customAttributes = [])
    {
        $validator = $this->getValidationFactory()->make($request->all(), $rules, $messages, $customAttributes);
     
        if ($validator->fails()) {
            $this->throwValidationException($request, $validator);
        }
    

    了解了表单验证的原理,那接下来我们就使用控制器自带的 validate 方法进行校验吧!

    首先,通过表单,我们了解到需要校验的字段包括了:name, age, sex

    \app\Http\Controllers\StudentController.php

    public function create(Request $request)
    {
        // 判断是POST请求,也就是提交表单时走这个区间
        if($request->isMethod('POST'))
        {
            // 校验
            $this->validate($request, [
                'Student.name' => 'required|min:2|max:20',
                'Student.age' => 'required|integer',
                'Student.sex' => 'required|integer',
            ]);
    

    此时,我们尝试提交表单(注意:此处可以不填写任何内容),发现无法提交成功。因为当验证无法通过时,程序会抛出异常,不往下执行。

    2 显示失败信息

    好了,接下来我们就让表单的验证信息输出吧!之前,我们表单上的失败信息,就该派上用场了! GO!!!1

    显示验证错误原理:如果本次请求的参数未通过我们指定的验证规则呢?正如前面所提到的,Laravel
    会自动把用户重定向到先前的位置。另外,所有的验证错误会被自动 闪存至 session。请注意我们并不需要在 GET
    路由中明确的将错误消息绑定到视图上。这是因为 Laravel 会自动检查 session
    内的错误数据,如果错误存在的话,它会自动将这些错误消息绑定到视图上。因此需要的注意一点是 $errors
    变量在每次请求的所有视图中都可以被使用,你可以很方便的假设 e r r o r s 变 量 已 被 定 义 且 进 行 安 全 地 使 用 。 errors 变量已被定义且进行安全地使用。 errors使errors 变量是
    Illuminate\Support\MessageBag 的实例。

    出处:http://d.laravel-china.org/docs/5.2/validation#validation-quickstart

    \resources\views\shared\message.blade.php

    @if(count($errors) > 0)
    <div class="alert alert-danger">
        <ul>
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    

    在这里插入图片描述

    3 表单校验信息转化成中文

    创建Request
    php artisan make:request CreateUserRequest
    CreateUserRequest代码块 ,校验方法如下:

    // 校验
    <?php
    
    namespace App\Http\Requests;
    
    use App\Http\Requests\Request;
    
    class CreateUserRequest extends Request
    {
            //验证规则可自己添加需要验证的字段
        protected $rules = [    
            'Student.userName' => 'required|between:2,4',
            'Student.userAge' => 'required|integer',
            'Student.userSex' => 'required|integer',
            'Student.addr' => 'required',
        ];
        //这里我只写了部分字段,可以定义全部字段
        protected $strings_key = [
            'Student.userName' => '用户名',
            'Student.userAge' => '年龄',
            'Student.userSex' => '性别',
            'Student.addr' => '地址',
        ];
        //这里我只写了部分情况,可以按需定义
        protected $strings_val = [
            'required'=> '为必填项',
            'min'=> '最小为:min',
            'max'=> '最大为:max',
            'between'=> '长度在:min和:max之间',
            'integer'=> '必须为整数',
            'sometimes'=> '',
        ];
    
        /**
         * Determine if the user is authorized to make this request.
         *
         * @return bool
         */
        public function authorize()
        {
            return true;//修改为true
        }
    
        /**
         * Get the validation rules that apply to the request.
         *
         * @return array
         */
        public function rules()
        {
    
            $rules = $this->rules;
            // 根据不同的情况, 添加不同的验证规则
            if (Request::getPathInfo() == '/save')//如果是save方法
            {
                $rules['Student.addr'] = 'sometimes';
            }
            if (Request::getPathInfo() == '/edit')//如果是edit方法
            {
                $rules['Student.addr'] = 'required|min:5';
            }
            return $rules;        
    
        }
      //返回给前台的错误信息
        public function messages(){
            $rules = $this->rules();
            $k_array = $this->strings_key;
            $v_array = $this->strings_val;
            foreach ($rules as $key => $value) {
                $new_arr = explode('|', $value);//分割成数组
                foreach ($new_arr as $k => $v) {
                    $head = strstr($v,':',true);//截取:之前的字符串
                    if ($head) {$v = $head;}
                    $array[$key.'.'.$v] = $k_array[$key].$v_array[$v];                  
                }
            }
            return $array;
        }
    }
    

    控制器具体方法

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function save(\App\Http\Requests\CreateUserRequest $request)
    {
            //这里会自动调用表单验证
            //验证成功后继续向下执行
            $data = $request->input('Student');
            if(User::create($data)){
               return redirect('/')->with('success', '添加成功!');
            }else{
               return redirect('/create')->with('error', '添加失败!'); 
            }
    }
    

    对应的模板文件即视图文件,使用 {{ $errors->first(‘Student.name’) }} 可以只显示第一条错误信息:

    <form class="form-horizontal" method="post" action="{{ url('student/create') }}">
        {{ csrf_field() }}
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">姓名</label>
     
            <div class="col-sm-5">
                <input type="text" name="Student[name]" class="form-control" id="name" placeholder="请输入学生姓名">
            </div>
            <div class="col-sm-5">
                <p class="form-control-static text-danger">{{ $errors->first('Student.name') }}</p>
            </div>
        </div>
        <div class="form-group">
            <label for="age" class="col-sm-2 control-label">年龄</label>
     
            <div class="col-sm-5">
                <input type="text" name="Student[age]" class="form-control" id="age" placeholder="请输入学生年龄">
            </div>
            <div class="col-sm-5">
                <p class="form-control-static text-danger">{{ $errors->first('Student.age') }}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">性别</label>
     
            <div class="col-sm-5">
                <label class="radio-inline">
                    <input type="radio" name="Student[sex]" value="2"> 未知
                </label>
                <label class="radio-inline">
                    <input type="radio" name="Student[sex]" value="1"></label>
                <label class="radio-inline">
                    <input type="radio" name="Student[sex]" value="0"></label>
            </div>
            <div class="col-sm-5">
                <p class="form-control-static text-danger">{{ $errors->first('Student.sex') }}</p>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </form>
    

    此时表单提交的功能就完成大半啦,但是不能够保存上一次输入的信息,还是不够完美!那下一步就完善一下。

    4 表单信息保持

    闪存输入数据至 Session 后重定向。

    你可能需要将输入数据闪存并重定向至前一页,这时只要在重定向方法后加上 withInput 即可。

    // 模型的添加方法
    $ret = Student::insert($data);
    if($ret)
    {
        return redirect('/')->with('success', '添加成功!')->withInput();
    } else{
        return redirect('student/create')->with('error', '添加失败!')->withInput();
    }
    

    在表单的标签上加上 value 属性值。如 {{ old(‘Student’)[‘name’] }}

    <form class="form-horizontal" method="post" action="{{ url('student/create') }}">
        {{ csrf_field() }}
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">姓名</label>
     
            <div class="col-sm-5">
                <input type="text" value="{{ old('Student')['name'] }}" name="Student[name]" class="form-control" id="name" placeholder="请输入学生姓名">
            </div>
            <div class="col-sm-5">
                <p class="form-control-static text-danger">{{ $errors->first('Student.name') }}</p>
            </div>
        </div>
        <div class="form-group">
            <label for="age" class="col-sm-2 control-label">年龄</label>
     
            <div class="col-sm-5">
                <input type="text" value="{{ old('Student')['age'] }}" name="Student[age]" class="form-control" id="age" placeholder="请输入学生年龄">
            </div>
            <div class="col-sm-5">
                <p class="form-control-static text-danger">{{ $errors->first('Student.age') }}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">性别</label>
     
            <div class="col-sm-5">
                <label class="radio-inline">
                    <input type="radio" name="Student[sex]" {{ (isset(old('Student')['sex']) && old('Student')['sex'] == '2') ? 'checked' : '' }} value="2"> 未知
                </label>
                <label class="radio-inline">
                    <input type="radio" name="Student[sex]" {{ (isset(old('Student')['sex']) && old('Student')['sex'] == '1') ? 'checked' : '' }} value="1"></label>
                <label class="radio-inline">
                    <input type="radio" name="Student[sex]" {{ (isset(old('Student')['sex']) && old('Student')['sex'] == '0') ? 'checked' : '' }} value="0"></label>
            </div>
            <div class="col-sm-5">
                <p class="form-control-static text-danger">{{ $errors->first('Student.sex') }}</p>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </form>
    

    在这里插入图片描述

    第一种:控制器验证

    控制器内容

    if ($request->isMethod('POST')) {
            $this->validate($request, [
                'Student.name' => 'required|min:2|max:20',
                'Student.age' => 'required|integer|max:100',
                'Student.sex' => 'required|integer',
            ], [
                'required' => ':attribute 为必填项',
                'min' => ':attribute 长度小于范围',
                'max' => ':attribute 长度超出范围',
                'integer' => ':attribute 必须为整数',
            ], [
                'Student.name' => '姓名',
                'Student.age' => '年龄',
                'Student.sex' => '性别',
            ]);
    
            $data = $request->input('Student');
    
            if (Student::create($data)) {
                return redirect('student/index')->with('success','添加成功');
            } else {
                return redirect()->back()->with('error', '添加失败');
            }
        }
        return view('student.create');
    

    如果控制器中代码验证通过了(validate),那么会执行之后的代码,如果没有通过,框架会抛出一个异常,自动返回上一个页面;
    错误信息被存到Session中了,并且将它绑定到视图;

    第二种: Validator验证

    控制器中:
    使用\Validator::make创建验证:

     if ($request->isMethod('POST')) {
        $validator = \Validator::make($request->input(), [
            'Student.name' => 'required|min:2|max:20',
            'Student.age' => 'required|integer|max:100',
            'Student.sex' => 'required|integer',
        ], [
            'required' => ':attribute 为必填项',
            'min' => ':attribute 长度小于范围',
            'max' => ':attribute 长度超出范围',
            'integer' => ':attribute 必须为整数',
        ], [
            'Student.name' => '姓名',
            'Student.age' => '年龄',
            'Student.sex' => '性别',
        ]);
    

    fails()代表验证失败,withErrors($validator)则为手动绑定错误信息

        if($validator->fails()) {
            return redirect()->back()->withErrors($validator);
        }
        $data = $request->input('Student');
    
        if (Student::create($data)) {
            return redirect('student/index')->with('success','添加成功');
        } else {
            return redirect()->back()->with('error', '添加失败');
        }
    }
    return view('student.create');
    }
    

    视图中调用错误信息

    <p class="form-control-static text-danger">{{ $errors->first('Student.name') }}</p>
    

    数据保持

    (作用:验证失败时不用重新输入表单数据)

    withInput() 默认将$request数据全部放进去

      return redirect()->back()->withErrors($validator)->withInput();
    

    视图中调用$errors的old方法:

    普通input框:value="{{ old('Student')['age'] }}"
    
    单选框:{{ old('Student.sex') == 0 ? "checked='checked'" : '' }}
    
    展开全文
  • vue表单验证

    千次阅读 2022-03-22 11:12:43
    二、每个表单域的prop用来绑定验证规则 同时注意到v-model里绑定的数据是我们第一步绑定的表单数据中的属性 三、编写rules,注意rules的位置,在 `data() { return { formData:{ understand: ‘’, }, rules: { ...

    一、绑定el-form的model,下面验证的数据必须是这个model里的属性
    绑定验证规则rules
    在这里插入图片描述二、每个表单域的prop用来绑定验证规则
    同时注意到v-model里绑定的数据是我们第一步绑定的表单数据中的属性
    在这里插入图片描述三、编写rules,注意rules的位置,在
    `data() {
    return {
    formData:{
    understand: ‘’,
    },
    rules: {
    understand: [{ required: true, message: ‘对现有岗位职责的理解不能为空’, trigger: ‘blur’ }],
    }
    }
    }在这里插入图片描述

    展开全文
  • jQuery实现表单验证

    万次阅读 多人点赞 2019-04-24 22:13:35
    1.基于html表单,利用jQuery实现表单验证功能。 2.html基本结构和样式: 3.html代码: <!DOCTYPE ...
  • 一、表单验证 <a-form-model ref="form" :rules="rules" :model="form" layout="inline" :label-col="{span: 10}" :wrapper-col="{span: 14}" > <a-form-model-item label="密...
  • 表单验证 react 总览 处理表单是Web应用程序极为常见的用例。 在本文中,让我们探索使用React而不使用第三方库来处理表单输入和验证的方法。 要求 我们将介绍适用于大多数用例的最受欢迎的功能: 使用表单...
  • 推荐阅读:Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱  JavaScript 可用来在数据被送往服务器前对 HTML 表单中的...
  • vue 的表单验证

    千次阅读 2022-03-23 16:01:24
    vue 的表单验证
  • EasyUI之表单验证

    千次阅读 2019-05-06 20:05:18
      当我们开发一个管理类项目的时候,EasyUI是我常用的一个jquery框架,而表单验证显然是我们必须要实现的功能,而使用基于EasyUI的验证功能就比较简便了,本文来介绍下具体的用法 EasyUI表单验证 1.官方提供的验证...
  • angular8响应式表单,表单验证,异步验证 响应式表单 Angular 提供了两种不同的方式来创建表单处理用户输入:响应式表单和模板驱动表单。 响应式表单和模板驱动表单共享了一些底层构造块。 FormControl 实例用于追踪...
  • 使用JS实现表单验证

    万次阅读 多人点赞 2020-07-02 13:23:17
    以注册页面为例实现表单验证功能。 表单页面展示 FormCheck.jsp <!DOCTYPE html> < html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面表单校验</title> <...
  • uni-app 表单验证

    千次阅读 2022-01-21 10:44:41
    uni 表单验证 本文只用做记录及学习使用 <uni-forms modelValue="formData" ref="setPwdForm" :rules="rules"> <uni-forms-item label="手机号:"> <uni-easyinput type="number" v-model=...
  • vue密码正则验证表单验证 介绍 (Introduction) Almost every web application makes use of forms in some way, as such developers always have to tackle form validations. If you are a new developer, it can ...
  • 十二、表单验证技术

    千次阅读 热门讨论 2021-04-19 22:04:10
    文章目录十二、表单验证技术12.1 表单验证概述12.2 表单验证方式12.2.1 编程式表单验证(基本不用)12.2.2 正则表达式表单验证12.2.2.1 正则表达式元字符12.2.2.2 正则表达式限定符12.3 JS 中常用事件12.4 常用函数 ...
  • 比较实用的javascript做的表单验证,验证的表单域包括用户名、密码、密码...表单域基本通过获得焦点显示提示信息,失去焦点进行验证,还有提交表单验证。提交表单先进行必填项不能为空验证,再进行正则表达式匹配验证。
  • 1、官网介绍表单验证使用https://element.faas.ele.me/#/zh-CN/component/form#biao-dan-yan-zheng 2、所遇到的问题,当字段是数字类型的时候,输入input后,验证不通过 原因是 el-input默认值的类型是字符串...
  • 手写表单及h5表单验证举例

    千次阅读 2019-06-28 14:05:20
    这里复习一下手写表单,顺带复习一下表单的基本属性,基本样式和h5的表单验证。 一个表单基本包含一个html结构,即表单结构,针对html的样式,表单验证,表单提交。这里会把前三项的相关代码贴出来。大家组合到一个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 289,652
精华内容 115,860
关键字:

表单验证

友情链接: paiben.zip