精华内容
下载资源
问答
  • //验证 this.$refs.examine.validateField("barCode") //取消验证 this.$refs.examine.clearValidate('barCode');
    //验证
    this.$refs.examine.validateField("barCode");
    this.rules.barCode= [{ required: true, message: '请上传图片' }]
    
    
    //取消验证
    this.$refs.examine.clearValidate('barCode');

     

    展开全文
  • JS表单验证-12常用的JS表单验证

    千次阅读 多人点赞 2018-09-13 15:02:30
    JS表单验证-12常用的JS表单验证 表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1、长度限制 <p>1. 长度限制</p> <form name=...

    JS表单验证-12个常用的JS表单验证

    表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~

    1、长度限制

    <p>1. 长度限制</p>
    <form name=a onsubmit="return test()">
        <textarea name="b" cols="40" rows="6" placeholder="不能超过50个字符!"></textarea>
        <br />
        <input type="submit" name="Submit" value="check">
    </form>
    
    <script language="javascript"> 
        function test() {
            if (document.a.b.value.length > 50) {
                alert("不能超过50个字符!");
                document.a.b.focus();
                return false;
            }
        } 
    </script> 

    2、 只能是汉字

    <p>2. 只能是汉字 </p>
    <input type="text" onblur="isChinese(this.value)" placeholder="请输入中文!" />
    
    <script language="javascript"> 
        function isChinese(obj) {
            var reg = /^[\u0391-\uFFE5]+$/;
            if (obj != "" && !reg.test(obj)) {
                alert('必须输入中文!');
                return false;
            }
        }

    以下demo中的HTML的结构与验证中文结构相似的,小编就只写js啦~~~

    3、只能是英文字母

    <script type="text/javascript">
        //验证只能是字母
        function checkZm(zm) {
            var zmReg = /^[a-zA-Z]*$/;
            if (zm != "" && !zmReg.test(zm)) {
                alert("只能是英文字母!");
                return false;
            }
        } 
    </script>

    4、 只能是数字

    <script language=javascript> 
        //验证只能为数字 
        function checkNumber(obj) {
            var reg = /^[0-9]+$/;
            if (obj != "" && !reg.test(obj)) {
                alert('只能输入数字!');
                return false;
            }
        } 
    </script> 

    5、 只能是英文字母和数字

    <script type="text/javascript">
        //验证只能是字母和数字 
        function checkZmOrNum(zmnum) {
            var zmnumReg = /^[0-9a-zA-Z]*$/;
            if (zmnum != "" && !zmnumReg.test(zmnum)) {
                alert("只能输入是字母或者数字,请重新输入");
                return false;
            }
        } 
    </script> 

    **重点内容**6、检验时间大小(与当前时间比较)

    <script type="text/javascript">
        //检验时间大小(与当前时间比较) 
        function checkDate(obj) {
            var obj_value = obj.replace(/-/g, "/");//替换字符,变成标准格式(检验格式为:'2009-12-10') 
            // var obj_value=obj.replace("-","/");//替换字符,变成标准格式(检验格式为:'2010-12-10 11:12') 
            var date1 = new Date(Date.parse(obj_value));
            var date2 = new Date();//取今天的日期 
            if (date1 > date2) {
                alert("不能大于当前时间!");
                return false;
            }
        } 
    </script> 

    7、屏蔽关键字(这里屏蔽***和****)

    <script type="text/javascript">
        function test(obj) {
            if ((obj.indexOf("***") == 0) || (obj.indexOf("****") == 0)) {
                alert("屏蔽关键字(这里屏蔽***和****)!");
                return false;
            }
        } 
    </script>

    8、两次输入密码是否相同

    <script type="text/javascript">
        function check() {
            with (document.all) {
                if (input1.value != input2.value) {
                    alert("密码不一致")
                    input1.value = "";
                    input2.value = "";
                }
                else {
                    alert("密码一致");
                    document.forms[0].submit();
                }
            }
        } 
    </script> 

    9、 表单项不能为空

    <script language="javascript"> 
        function CheckForm(obj) {
            if (obj.length == 0) {
                alert("姓名不能为空!");
                return false;
            }
            return true;
            alert("姓名不能为空!");
        } 
    </script> 

    10、 邮箱验证

    <script language="javascript">
        function test(obj) {
            //对电子邮件的验证
            var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
            if (!myreg.test(obj)) {
                alert('请输入有效的邮箱!');
                return false;
            }
        }
    </script> 

    11、 验证手机号

    <script type="text/javascript">
        function validatemobile(mobile) {
            if (mobile.length == 0) {
                alert('手机号码不能为空!');
                return false;
            }
            if (mobile.length != 11) {
                alert('请输入有效的手机号码,需是11位!');
                return false;
            }
    
            var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if (!myreg.test(mobile)) {
                alert('请输入有效的手机号码!');
                return false;
            }
        } 
    </script> 

    12、验证身份证号码(需是有效身份证)

    <script type="text/javascript">
        // 构造函数,变量为15位或者18位的身份证号码
        function clsIDCard(CardNo) {
            this.Valid = false;
            this.ID15 = '';
            this.ID18 = '';
            this.Local = '';
            if (CardNo != null) this.SetCardNo(CardNo);
        }
    
        // 设置身份证号码,15位或者18位
        clsIDCard.prototype.SetCardNo = function (CardNo) {
            this.ID15 = '';
            this.ID18 = '';
            this.Local = '';
            CardNo = CardNo.replace(" ", "");
            var strCardNo;
            if (CardNo.length == 18) {
                pattern = /^\d{17}(\d|x|X)$/;
                if (pattern.exec(CardNo) == null) return;
                strCardNo = CardNo.toUpperCase();
            } else {
                pattern = /^\d{15}$/;
                if (pattern.exec(CardNo) == null) return;
                strCardNo = CardNo.substr(0, 6) + '19' + CardNo.substr(6, 9)
                strCardNo += this.GetVCode(strCardNo);
            }
            this.Valid = this.CheckValid(strCardNo);
        }
    
        // 校验身份证有效性
        clsIDCard.prototype.IsValid = function () {
            return this.Valid;
        }
    
        // 返回生日字符串,格式如下,1981-10-10
        clsIDCard.prototype.GetBirthDate = function () {
            var BirthDate = '';
            if (this.Valid) BirthDate = this.GetBirthYear() + '-' + this.GetBirthMonth() + '-' + this.GetBirthDay();
            return BirthDate;
        }
    
        // 返回生日中的年,格式如下,1981
        clsIDCard.prototype.GetBirthYear = function () {
            var BirthYear = '';
            if (this.Valid) BirthYear = this.ID18.substr(6, 4);
            return BirthYear;
        }
    
        // 返回生日中的月,格式如下,10
        clsIDCard.prototype.GetBirthMonth = function () {
            var BirthMonth = '';
            if (this.Valid) BirthMonth = this.ID18.substr(10, 2);
            if (BirthMonth.charAt(0) == '0') BirthMonth = BirthMonth.charAt(1);
            return BirthMonth;
        }
    
        // 返回生日中的日,格式如下,10
        clsIDCard.prototype.GetBirthDay = function () {
            var BirthDay = '';
            if (this.Valid) BirthDay = this.ID18.substr(12, 2);
            return BirthDay;
        }
    
        // 返回性别,1:男,0:女
        clsIDCard.prototype.GetSex = function () {
            var Sex = '';
            if (this.Valid) Sex = this.ID18.charAt(16) % 2;
            return Sex;
        }
    
        // 返回15位身份证号码
        clsIDCard.prototype.Get15 = function () {
            var ID15 = '';
            if (this.Valid) ID15 = this.ID15;
            return ID15;
        }
    
        // 返回18位身份证号码
        clsIDCard.prototype.Get18 = function () {
            var ID18 = '';
            if (this.Valid) ID18 = this.ID18;
            return ID18;
        }
    
        // 返回所在省,例如:上海市、浙江省
        clsIDCard.prototype.GetLocal = function () {
            var Local = '';
            if (this.Valid) Local = this.Local;
            return Local;
        }
    
        clsIDCard.prototype.GetVCode = function (CardNo17) {
            var Wi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1);
            var Ai = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
            var cardNoSum = 0;
            for (var i = 0; i < CardNo17.length; i++)cardNoSum += CardNo17.charAt(i) * Wi[i];
            var seq = cardNoSum % 11;
            return Ai[seq];
        }
    
        clsIDCard.prototype.CheckValid = function (CardNo18) {
            if (this.GetVCode(CardNo18.substr(0, 17)) != CardNo18.charAt(17)) return false;
            if (!this.IsDate(CardNo18.substr(6, 8))) return false;
            var aCity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" };
            if (aCity[parseInt(CardNo18.substr(0, 2))] == null) return false;
            this.ID18 = CardNo18;
            this.ID15 = CardNo18.substr(0, 6) + CardNo18.substr(8, 9);
            this.Local = aCity[parseInt(CardNo18.substr(0, 2))];
            return true;
        }
    
        clsIDCard.prototype.IsDate = function (strDate) {
            var r = strDate.match(/^(\d{1,4})(\d{1,2})(\d{1,2})$/);
            if (r == null) return false;
            var d = new Date(r[1], r[2] - 1, r[3]);
            return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[2] && d.getDate() == r[3]);
        }
    
    
        function valiIdCard(idCard) {
            var checkFlag = new clsIDCard(idCard);
            if (!checkFlag.IsValid()) {
                alert("输入的身份证号无效,请输入真实的身份证号!");
                document.getElementByIdx("idCard").focus();
                return false;
            } else {
                alert("是有效身份证!");
            }
        }
    </script>

    原文地址:https://www.cnblogs.com/yangmengsheng/p/5973586.html

    展开全文
  • layui 表单验证案例

    万次阅读 2016-10-26 11:49:08
    文本框,手机,邮箱,textarea等格式的验证 HTML代码: 反馈主题

    js如何判断字符是中文,英文,数字还是字符

    //验证是否是中文
     
    var pattern = new RegExp("[\u4E00-\u9FA5]+");
     
    var str = "中文字符"
     
    if(pattern.test(str)){
     
        alert('该字符串是中文');
     
    }
     
    //验证是否是英文
     
    var pattern2 = new RegExp("[A-Za-z]+");
     
    var str2 = "abcdefsgaaweg"
     
    if(pattern2.test(str2)){
     
        alert('该字符串是英文');
     
    }
     
    //验证是否是数字
     
    var pattern3 = new RegExp("[0-9]+");
     
    var str3 = "234234"
     
    if(pattern3.test(str3)){
     
        alert('该字符串是数字');
     
    }

    所有layui验证:举例只能是英文

    	form.verify({
    		env: function(value, item){ //value:表单的值、item:表单的DOM对象
    			if(!new RegExp("^[A-Za-z]+$").test(value)){
    				return '必须全部为英文';
    			}
    			if(value.length < 5){
    				return '至少5位';
    			}
    		}
    	});

     

    文本框,手机,邮箱,textarea等格式的验证

    1、验证必填项:lay-verify=”required”
    2、数字验证:lay-verify=”int”
    3、验证用户名:lay-verify=”username”
    4、验证手机号:lay-verify=”phone”
    5、验证邮箱:lay-verify=”email”
    6、验证身份证:lay-verify=”identity”
    7、验证日期:lay-verify=”date”
    8、验证链接:lay-verify=”url”
    9、自定义密码验证:lay-verify=”pass”

     

    <script src="layui/layui.js"></script>

    <script src="layui/lay/dest/layui.all.js"></script> 

    <link rel="stylesheet" href="layui/css/layui.css"> 

    HTML代码:

    <form class="layui-form" action="">
                              <div class="layui-form-item">
                                <label class="layui-form-label">反馈主题</label>
                                <div class="layui-input-block">
                                  <input name="title" class="layui-input" type="text" placeholder="请输入标题" autocomplete="off" lay-verify="title">
                                </div>
                              </div>
                              <div class="layui-form-item">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-block">
                                  <input name="fname" class="layui-input" type="text" placeholder="请输入姓名" autocomplete="off" lay-verify="fname">
                                </div>
                              </div>
                              <div class="layui-form-item">
                                <label class="layui-form-label">手机</label>
                                <div class="layui-input-block">
                                  <input name="phone" class="layui-input" type="tel" autocomplete="off" placeholder="请输入手机" lay-verify="phone">
                                </div>
                              </div>
                              <div class="layui-form-item">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-block">
                                  <input name="email" class="layui-input" type="text" autocomplete="off" placeholder="请输入邮箱" lay-verify="email">
                                </div>
                              </div>
                              <div class="layui-form-item">
                                <label class="layui-form-label">单选框</label>
                                <div class="layui-input-block">
                                  <input name="sex" title="男" type="radio" checked="" value="男">
                                  <input name="sex" title="女" type="radio" value="女">
                                  <input name="sex" title="保密" type="radio" value="密">
                                </div>
                              </div>
                              <!--<div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">普通文本域</label>
                                <div class="layui-input-block">
                                  <textarea class="layui-textarea" placeholder="请输入内容">请输入内容</textarea>
                                </div>
                              </div>-->
                              <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">内容</label>
                                <div class="layui-input-block">
                                  <textarea class="layui-textarea layui-hide"  name="contact" id="LAY_demo_editor" lay-verify="contact"></textarea>
                                </div>
                              </div>
                              <div class="layui-form-item">
                                <div class="layui-input-block">
                                  <button class="layui-btn" lay-filter="demo2" lay-submit="">跳转式提交</button>
                                  <button class="layui-btn" lay-filter="demo1" lay-submit="">立即提交</button>
                                  <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                                </div>
                              </div>
                            </form>

     

    js验证代码

     

    <script>
    layui.use(['form', 'layedit', 'laydate'], function(){
      var form = layui.form()
      ,layer = layui.layer
      ,layedit = layui.layedit
      ,laydate = layui.laydate;
     
      //自定义验证规则
      form.verify({
    		title: function(value){
    		  if(value.length < 5){
    			return '标题至少得5个字符啊';
    		  }
    		}, fname: function(value){
    		  if(value.length < 4){
    			return '请输入至少4位的用户名';
    		  }
    		}, contact: function(value){
    		  if(value.length < 4){
    			return '内容请输入至少4个字符';
    		  }
    		}
    		,phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位,只能是数字!']
    		,email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']
      });
      
      //创建一个编辑器
      layedit.build('LAY_demo_editor');
      
      //监听提交
      form.on('submit(demo1)', function(data){
        layer.alert(JSON.stringify(data.field), {
          title: '最终的提交信息'
        })
        return false;
      });
      
     
    });
    </script>

     

    其它验证可以看看这里

    http://www.51xuediannao.com/js/jquery/jquery_validate/

     

    展开全文
  • 一、前言 ...文章中的实例就是在实际项目中遇到的一个复杂表单验证问题。 文章中前端代码基于Vue.js框架,element UI开发。表单的初始数据来自API返回的数据。返回的数据结构如下: { Id:'', ...

     一、前言

    普通的表单验证参考element UI官方文档即可找到解决方案并顺利进行代码实现,官方也给出了几个示例,是很好的参考。不过,对于复杂的表单验证,官方文档并没有给出过多示例或者说明。文章中的实例就是在实际项目中遇到的一个复杂表单的验证问题。

    文章中前端代码基于Vue.js框架,element UI开发。表单的初始数据来自API返回的数据。返回的数据结构如下:

    {
    	Id:'',
    	Des:'',
    	MedicalPayDetail:[		// 渲染到表单中的数据
    		{
    			EKey:'',
    			ListMedicalExadmin:
    			[
    				{
    					ProjectName:'',
    					PayMoney:'',        // 需要验证的项
    					ReducePayRate:'',   // 需要验证的项
    					……
    				}
    			]
    		},
    		{
    			EKey:'',
    			ListMedicalExadmin:
    			[
    				{
    					ProjectName:'',
    					PayMoney:'',		// 需要验证的项
    					ReducePayRate:'',	// 需要验证的项
    					……
    				}
    			]
    		},
    		……
    	]
    }

     其中,API返回的数据放到了source对象中。element UI中的表单组件要进行验证无论什么情况下都需要对表单绑定model,那么如何对表单绑定model是第一个难点。如果使用 :model="source.MedicalPayDetail" 方式进行绑定,那么在控制台可以看到框架报错了。报错信息的意思是:期望对象,得到的是数组。所以按照以往的直接绑定的方式不行了,换一种绑定方式来解决绑定对象报错问题,Vue中还有另外一种绑定model的方法——:model="{MedicalPayDetail:source.MedicalPayDetail}"。利用这种绑定方式解决了“期望对象,得到的是数组”的错误。

    当对表单部分表单项进行验证时可以在表单项中指定验证规则而无需再表单上指定即在FormItem上指定而不是在el-form上。代码如下:

    <template>
      <div class="medical-main">
        <div class="bh-title-yl">
          医疗审核表
        </div>
        <el-form :disabled="disabled" :model="{MedicalPayDetail:source.MedicalPayDetail}" ref="ruleForm">
          <div v-for="(item,index) in source.MedicalPayDetail" :key="index">
            <simple-box v-if="item.EKey!=3" :title="item.EKey==1?'门诊费':'住院费'" class="medical-item">
              <medical-step-first :disabled="disabled" slot="body" :title="item.EKey==1?'门诊费合计':'住院费合计'" :Cost.sync="item.Cost" :EKey="item.EKey" :totalTitle="item.EKey==1?'门诊扣减合计:':'住院扣减合计:'" :intpatientCount="intpatientCount" :itemIndex="index" :items="item.ListMedicalExadmin"></medical-step-first>
            </simple-box>
          </div>
          <Row class="medical-bottom-btn">
            <i-col span="24">
              <i-button :disabled="disabled" @click="createImg('ruleForm')" class="medical-bottom-btn-item" type="primary">保存并更新费用项目</i-button>
            </i-col>
          </Row>
        </el-form>
      </div>
    </template>
    
    <script>
    import Enumerable from 'linq'
    import { GetCompensateMedicalExamine, AddMedicalPayDetail } from '@/apis/medicalAudit'
    import { Base64FileUpload } from '@/apis/upload.js'
    import medicalStepFirst from './components/medicalStepFirst'
    import medcalStepSecond from './components/medcalStepSecond'
    import simpleBox from '../../SimpleCase/Components/form/simpleBox'
    import importModelVue from '../../../components/Common/importModel'
    import html2canvas from 'html2canvas'
    import { Canvas2Image } from '../../../Units/cancas2image'
    import { mapGetters } from 'vuex'
    let vm
    export default {
      data: function () {
        vm = this
        return {
          source: {
          },
          followId: 0,
          ruleForm: {
            MedicalPayDetail: []
          }
        }
      },
      created: function () {
        this.followId = this.$route.query.followId
        GetCompensateMedicalExamine({ followId: this.followId }).then(param => {
          this.source = param
          this.source.MedicalPayDetail = Enumerable.from(this.source.MedicalPayDetail).orderBy('a=>a.EKey').toArray()
          this.ruleForm.MedicalPayDetail = this.source.MedicalPayDetail
        })
      },
      components: {
        'medical-step-first': medicalStepFirst,
        'medcal-step-second': medcalStepSecond,
        'simple-box': simpleBox,
        'import-model-vue': importModelVue
      },
      computed: {
        ...mapGetters(['get_UserId']),
        disabled: () => {
          if ((vm.source.FollowStatus < 1 || vm.source.FollowStatus === 3) && vm.permissionsVerif('MedicalExamineEidt') > -1 && vm.source.CurrentCheckId === vm.get_UserId) {
            return false
          } else {
            return true
          }
        }
      },
      watch: {
      },
      methods: {
        totalMoney: function (item) {
          if (item.EKey !== 3) {
            return Enumerable.from(item.ListMedicalExadmin).sum(function (a) {
              return parseFloat(a.PayMoney)
            })
          } else {
            return Enumerable.from(item.ListMedicalExadmin).sum(function (a) {
              return parseFloat(a.ReducePayMoney)
            })
          }
        },
        createImg: function (formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let vm = this
              let shareContent = this.$el // 需要截图的包裹的(原生的)DOM 对象
              let width = shareContent.offsetWidth // 获取dom 宽度
              let height = shareContent.offsetHeight // 获取dom 高度
              let canvas = document.createElement('canvas') // 创建一个canvas节点
              var scale = 1 // 定义任意放大倍数 支持小数
              canvas.width = width * scale // 定义canvas 宽度 * 缩放
              canvas.height = height * scale // 定义canvas高度 *缩放
              canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
              let opts = {
                scale: scale, // 添加的scale 参数
                canvas: canvas, // 自定义 canvas
                // logging: true, //日志开关,便于查看html2canvas的内部执行流程
                width: width, // dom 原始宽度
                height: height,
                useCORS: true // 【重要】开启跨域配置
              }
              html2canvas(shareContent, opts).then(function (canvas) {
                let context = canvas.getContext('2d')
                // 【重要】关闭抗锯齿
                context.mozImageSmoothingEnabled = false
                context.msImageSmoothingEnabled = false
                context.imageSmoothingEnabled = false
                // 【重要】默认转化的格式为png,也可设置为其他格式
                let img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height)
                Base64FileUpload({
                  Base64String: img.src,
                  Suffix: '.jpeg',
                  ReportId: vm.followId
                }).then((respone) => {
                  let url = respone.Value
                  vm.saveData(url)
                })
              })
            } else {
              return false
            }
          })
        },
        saveData: function (url) {
          var that = this
          this.source.ImgUrl = url
          this.source.UserId = this.get_UserId
          AddMedicalPayDetail(that.source).then(param => {
            if (!window.opener.mvm.$refs.payDetial) {
              that.$Message.success('保存医疗审核表成功')
              return false
            }
            window.opener.mvm.$refs.payDetial.addMedical({
              ApprovedMoney: 0,
              Days: 0,
              IsMedicalExamination: true,
              PayItemMoney: Number(vm.NeedPayCount),
              PayItemName: '医疗费',
              PayItemNameCode: '1',
              PayItemStandard: Number(vm.NeedPayCount),
              ReduceMoney: Number(vm.NeedReduceCount),
              Remark: ''
            })
            that.$Message.success('保存医疗审核表成功')
          })
        }
    }
    </script>

     以下代码是组件medicalStepFirst 的代码。需要进行验证的表单项需要指定prop属性,而复杂表单中prop变得也比较复杂,medicalStepFirst组件中的表单项prop为::prop="'MedicalPayDetail['+itemIndex+'].ListMedicalExadmin['+index+'].PayMoney'"。注意:prop的值为string,因此双引号中又包一层单引号,因为表单项是根据初始数据进行初始化并且可以增加或减少表单项,因此表单项在数组中的索引是不固定的,这个时候需要用到v-for指令中声明的index来进行动态的拼出来prop。

    关键点:prop的值需要与数据中的该项的路径一致,否则编译后运行时会报错。另外,进行验证的方法是可以卸载methods中的,官方文档中这类方法是卸载data中以const来声明的,感觉不妥。

    <template>
      <div>
        <Row class="step-first-box">
          <!-- row 1 -->
          <i-col span="4" class="step-first-item step-first-blod step-first-tit">
            核减项目
          </i-col>
          <i-col span="6" class="step-first-item step-first-blod step-first-tit">
            金额(元)
          </i-col>
          <i-col span="6" class="step-first-item step-first-blod step-first-tit">
            自费原因
          </i-col>
          <i-col span="3" class="step-first-item step-first-blod step-first-tit">
            自费比例(%)
          </i-col>
          <i-col span="3" class="step-first-item step-first-blod step-first-tit">
            自费金额(元)
          </i-col>
          <i-col span="2" class="step-first-item step-first-blod step-first-tit">
            操作
          </i-col>
          <!-- row 2 -->
          <div v-for="(item,index) in ListMedicalExadmin" :key="index">
            <i-col span="4" class="step-first-item step-first-rowledge">
              <el-form-item>
                <el-input :disabled="disabled" v-model="item.ProjectName" placeholder="" style="width:90%; height:100%;"></el-input>
              </el-form-item>
            </i-col>
            <i-col span="6" class="step-first-item step-first-rowledge">
              <el-form-item :prop="'MedicalPayDetail['+itemIndex+'].ListMedicalExadmin['+index+'].PayMoney'" :rules="[{ validator: checkPayMoney, trigger: 'blur' }]">
                <el-input :disabled="disabled" v-model="item.PayMoney" placeholder="" style="width:90%; height:100%;">
                  <span slot="append" style="width:100%; height:100%;">元</span>
                </el-input>
              </el-form-item>
            </i-col>
            <i-col span="6" class="step-first-item step-first-rowledge">
              <el-form-item>
                <el-input :disabled="disabled" v-model="item.ReduceReason" placeholder="" style="width:90%; height:100%;">
                </el-input>
              </el-form-item>
            </i-col>
            <i-col span="3" class="step-first-item step-first-rowledge">
              <el-form-item :prop="'MedicalPayDetail['+itemIndex+'].ListMedicalExadmin['+index+'].ReducePayRate'" :rules="[{ validator: checkPayRate, trigger: 'blur' }]">
                <el-input :disabled="disabled" v-model="item.ReducePayRate" placeholder="" style="width:90%; height:100%;">
                  <span slot="append" style="width:100%; height:100%;">%</span>
                </el-input>
              </el-form-item>
            </i-col>
            <i-col span="3" class="step-first-item step-first-rowledge">
              <!-- <i-input :value="item.ReducePayRate*item.PayMoney/100" placeholder="" style="width:100%; height:100%;"></i-input> -->
              {{isNaN(item.ReducePayRate*item.PayMoney/100)?0:(item.ReducePayRate*item.PayMoney/100)}}
            </i-col>
            <i-col span="2" class="step-first-item step-first-rowledge">
              <a :disabled="disabled" @click="removeItem(index)">删除</a>
            </i-col>
          </div>
          <!-- row 3 btn-->
          <i-col v-if="!disabled" span="24" class="step-first-item step-first-blod">
            <Row>
              <i-col>
                <i-button @click="pushNewItem" type="dashed" long style="background-color:#f7f7f7;">+添加核减项目</i-button>
              </i-col>
            </Row>
          </i-col>
          <!-- row 4 -->
          <i-col span="16" class="step-first-item step-first-rowledge">
            <Row>
              <i-col span="6" class="step-first-blod">
                {{title}}
              </i-col>
              <i-col style="padding-left:10px" span="8">
                <el-form-item>
                  <el-input v-model="selCost" placeholder="请输入" style="width:100%; height:100%;">
                    <span slot="append" style="width:100%; height:100%;">元</span>
                  </el-input>
                </el-form-item>
              </i-col>
            </Row>
          </i-col>
          <i-col span="8" class="step-first-item step-first-blod step-first-rowledge">
            <i-col span="7">
              {{totalTitle}}
            </i-col>
            <i-col span="17">
              <font>{{intpatientCount}}</font>
            </i-col>
          </i-col>
        </Row>
      </div>
    </template>
    
    <script>
    import Enumerable from 'linq'
    export default {
      props: {
        title: {
          type: String,
          default: '缺省'
        },
        items: {
          type: Array
        },
        EKey: {
          type: Number,
          default: 1
        },
        Cost: 0,
        totalTitle: {
          type: String,
          default: '门诊扣减合计'
        },
        disabled: {
          type: Boolean
        },
        itemIndex: {
          type: Number,
          default: 0
        }
      },
      data: function () {
        return {
          source: {
          },
          followId: 0,
          ListMedicalExadmin: this.items,
          selCost: this.Cost
        }
      },
      computed: {
        intpatientCount: function () {
          return Enumerable.from(this.ListMedicalExadmin).sum(function (a) {
            let result = parseFloat(a.ReducePayRate) * parseFloat(a.PayMoney) / 100
            if (isNaN(result)) {
              return 0
            }
            return result
          })
        }
      },
      /**
       * 取消自动计算
       */
      watch: {
        selCost: function (val) {
          this.$emit('update:Cost', val)
        }
      },
      methods: {
        pushNewItem: function () {
          this.ListMedicalExadmin.push({
            'Id': 0,
            'ProjectName': '',
            'PayMoney': '0',
            'ReduceReason': '',
            'ReducePayRate': 0,
            'ReducePayMoney': 0,
            'ExaminationType': 0,
            'LossId': 0,
            'CreateTime': '',
            'UpdateTime': '',
            'IsDelete': 0,
            'LimiteMoney': 0,
            'FollowId': this.followId
          })
        },
        removeItem: function (index) {
          let _items = this.ListMedicalExadmin
          _items.splice(index, 1)
        },
        checkPayMoney: (rule, value, callback) => {
          if (parseInt(value) >= 0) {
            callback()
          } else {
            callback(new Error('金额必须大于等于0'))
          }
        },
    
        checkPayRate: (rule, value, callback) => {
          if (parseInt(value) >= 0 && parseInt(value) <= 100) {
            callback()
          } else {
            callback(new Error('必须在0-100之间'))
          }
        }
      }
    }
    </script>

     

    展开全文
  • Javascript表单验证

    千次阅读 2019-01-06 20:09:44
    验证输入是否是一个正确的email地址? 验证日期是否输入正确? 验证表单输入内容是否是为数字型? 逐个分析JavaScript表单验证内容: 必填(或必选)项目 该验证用来检查用户是否已填写表单...
  • html 表单验证

    千次阅读 2018-12-07 12:31:36
    因为最近在做一个项目,需要实现前端表单验证,而这些只是简单的非空和数字之类的简单验证,可能大家都听说过 jQuery Validate,但是我觉得引用 jQuery Validate 太麻烦了。 我采用的表单验证不是使用 框架来实现,...
  • form表单验证是几乎所有web项目或者APP都会遇到的,那么通常遇到的表单验证情况主要分为以下三种: 1.form表单中的表单项项都是写死的 意思是说,表单项不是根据动态数据加载出来的。那么需要写好对应的验证规则...
  • EasyUI之表单验证

    千次阅读 2019-05-06 20:05:18
      当我们开发一个管理类项目的时候,EasyUI是我常用的一个jquery框架,而表单验证显然是我们必须要实现的功能,而使用基于EasyUI的验证功能就比较简便了,本文来介绍下具体的用法 EasyUI表单验证 1.官方提供的验证...
  • vue表单单独对一个字段验证

    千次阅读 2020-05-29 10:36:42
    以普通表单创建为例,代码如下: <template> <div> <el-form :model="form" :rules="rules" ref="form> <el-form-item label="名称" prop="name"> <el-input v-model.trim="form....
  • AngularJS表单验证

    千次阅读 2015-03-09 15:36:39
    AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。 在AngularJS中,有许多表单验证指令。在这里,我们将谈谈几个最流行指令,然后我们将讨论如何编写自定义的验证。 form name=...
  • angular8响应式表单,表单验证,异步验证 响应式表单 Angular 提供了两种不同的方式来创建表单处理用户输入:响应式表单和模板驱动表单。 响应式表单和模板驱动表单共享了一些底层构造块。 FormControl 实例用于追踪...
  • element form表单只验证一

    千次阅读 2020-04-26 16:45:45
    element form表单只验证一项 给 form 添加 ref='form' 然后再需要验证的地方加上这段代码即可 this.$refs.form.validateField("password", errMsg => { if (errMsg) { console.log("校验未通过"); } else...
  • 以前做Vue项目,经常需要用到表单验证,当时为了项目的速度,为了更好的交互和上线之后更稳定的性能,一直使用的都是 VeeValidate 确实很好用很强大,但是复杂的英文API的确也在开发中给我带了一定的困难,再加上...
  • 在用蚂蚁 Ant Design 表单验证的时候在render 函数中按照文档来引入 const { getFieldDecorator } = this.props.form; 结果总是给我报TypeError: Cannot read property ‘getFieldDecorator’ of undefined 这么...
  • 当需要提交多个表单验证时,需分步验证,以两表单为例,js逻辑如下: export default { data() { return { baseform: {}, advanceform: {} } } }
  • 使用 jQuery Validate 进行表单验证

    万次阅读 多人点赞 2018-06-13 21:31:18
    jQuery Validate简介jQuery Validate 插件提供了强大的表单验证功能,能够让客户端表单验证变得更简单,同时它还提供了大量的可定制化选项,以满足应用程序的各种需求。该插件捆绑了一套非常有用的验证方法,包括 ...
  • SpringBoot 表单验证

    千次阅读 2017-04-14 16:42:59
    SpringBoot 表单验证表单验证,就是对用户的输入数据进行有效性检查,那么SpringBoot是如何来做的呢?还是以添加学生为例来进行说明,其中,Student实体类的代码如下:@Entity public class Student { @Id @...
  • 【一】题目要求:编写一个注册表单,配合vue完成表单验证 (1)用户名长度必须至少2个字符 (2)密码强度校验 (3)如果有字母、数字、特殊字符其中三项,且长度为6以上为高强度 如果有字母、数字、特殊字符其中...
  • PHP表单验证

    千次阅读 2018-07-03 11:04:12
    这里将介绍如何使用PHP验证客户端提交的表单数据。在处理PHP表单时需要考虑安全性,这里将展示PHP表单数据安全处理,为防止黑客以及垃圾信息就需要对表单进行数据安全验证,实例介绍的HTML表单中包含以下输入字段:...
  • 下面搜集了五种方法,主要还是前两个提供了...使用jquery.validate插件http://jqueryvalidation.org/,当节点的name相同时候,脚本特意忽略剩余节点,导致所有相关节点的errMsg都显示在第一个相关节点上。这个bug在...
  • 表单验证-邮箱验证

    千次阅读 2014-09-03 17:28:08
    表单验证-邮箱验证
  • 表单验证 <a-form-model ref="form" :rules="rules" :model="form" layout="inline" :label-col="{span: 10}" :wrapper-col="{span: 14}" > <a-form-model-item label="密...
  • 试想一种比较复杂的业务场景: 表格(el-table)的每一行数据的第一列是勾选框,...这里显然是一个数据遍历产生的动态表单验证问题,并且与el-table相结合。动态表单验证唯一的难点在于表单项的prop属性的设置问题...
  • Validate表单验证

    万次阅读 多人点赞 2018-11-28 20:15:33
    validate 一、 validate的使用步骤 引入jquery.min.js 引入 jquery.validate.js ...字段的name属性:“校验器”(tisps:一个输入框只有一个校验器的时候使用) 字段的name属性:{校验器:值,校验器:值}(t...
  • 分享一个纯手写漂亮的表单验证

    千次阅读 2016-03-19 04:52:22
    分享一个纯手写漂亮的表单验证 最近没有项目做,闲来没事,于是自己动手写了几个表单验证,特此分享供大家参考 哈哈 手工馒头好吃,今天小编跟大家分享手工js表单验证代码,感兴趣的朋友快来吧。 因为是自定义...
  • 该文章的作者的弹框组件是和父组件写在同一个vue文件里的,也就是没有单独把弹框的页面代码写在另一个vue文件里。这样在父子组件通信的时候其实只有两级通信,如果写在单独的一个vue文件里,实际上就是三级通信。 ...
  • 表单验证 - form表单元素在AngularJS中也是一个指令 - 具备表单解析、格式化、校验等功能 - 依赖于H5的智能表单 - AngularJS允许在表单中使用H5的一些校验属性 - 同时会根据校验条件的规则作出相应的数据...
  • asp.net验证表单与javascript验证表单都可以验证表单,孰优孰劣,如何抉择?
  • vue表单验证

    万次阅读 2016-11-29 23:23:55
    最近在做vue的项目,遇到表单验证的问题,验证手机,身份证号,护照号,必填选填等 ------------------------------------------------------------------------- 改别人的代码,刚开始搞不懂用的什么组建,有两...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 260,107
精华内容 104,042
关键字:

表单验证只验证一个