[fastadmin]第十二篇 fastadmin form 表单验证

参考文章

ask.fastadmin.net/article/38471.ht...

参考文章2 简易 规则

blog.csdn.net/oraclechaozi/article...

fastadmin 扩展玩法,自定义rules

请参考 nicevalidate
validator.niceue.com/docs/options....

本人解析与实践

tpl省略,都一样的.来看 js部分 增加的 代码

首先 封装一个函数 checkform

checkForm: function () {
    // 记录上次 字段 初始值
  var oldFieldsLength = 11;
  // 记录上传 忽略字段 初始值
  var oldIgnoreLength = 0;

  // 表单验证 完全自定义写js 版本
  setInterval(function () {   //设置定时器
  let yptym = $("input[name='row[yptym]']").val();
 let spm = $("input[name='row[spm]']").val();
 var gg = $("input[name='row[gg]']").val();
 var dw = $("input[name='row[dw]']").val();
 var scqy = $("input[name='row[scqy]']").val();
 var zbj = $("input[name='row[zbj]']").val();
 var zc = $("input[name='row[zc]']").val();
 var tbdm = $("input[name='row[tbdm]']").val();
 var pzlxr = $("input[name='row[pzlxr]']").val();
 var xldh = $("input[name='row[xldh]']").val();
 var fbrq = $("input[name='row[fbrq]']").val();
 var ypchqd = $("input[name='row[ypchqd]']").val();
 var ypjhqd = $("input[name='row[ypjhqd]']").val();
 var dhje = $("input[name='row[dhje]']").val();

  // 设置校验 字段
  var fieldsArr = {};
  fieldsArr['row[yptym]'] = "required";
  // fieldsArr['row[spm]'] = "required";
  fieldsArr['row[gg]'] = "required;";
  fieldsArr['row[dw]'] = "required";
  fieldsArr['row[scqy]'] = "required";
  fieldsArr['row[zbj]'] = "required;range[0~]";
  fieldsArr['row[zc]'] = "required;range[0~1]";
  fieldsArr['row[tbdm]'] = "required;zimushuzi";
  fieldsArr['row[ypchqd]'] = "required;";
  fieldsArr['row[ypjhqd]'] = "required;";
  fieldsArr['row[dhje]'] = "required;";

  // 品种联系人必须有
  fieldsArr['row[pzlxr]'] = "required;";
  fieldsArr['row[xldh]'] = "required;mobile";
  fieldsArr['row[fbrq]'] = "required";

 var ignoreArr = [];
  // 设置校验 提示信息
  // 拼音码
  // if (yptym !== '') {
 //     fieldsArr['row[pym]'] = "required;zimu"; // }else{ //     ignoreArr.push('#c-pym'); //     $('#c-pym').val(''); // } // 商品名 拼音码
  // if (spm !== '') {
 //     fieldsArr['row[spmpym]'] = "required;zimu"; // }else{ //     ignoreArr.push('#c-spmpym'); //     $('#c-spmpym').val(''); // } // 拼音码 非必填

  // 判断 是否执行 表单校验 比较 记录的旧值 和 新值 是否发送变化 未发生变化则不执行
  if (oldFieldsLength !== Object.keys(fieldsArr).length || oldIgnoreLength !== ignoreArr.length){
            // 记录新值 为 旧值
  oldFieldsLength = Object.keys(fieldsArr).length;
  oldIgnoreLength = ignoreArr.length;
  // 设置表单校验
  $('form[role=form]').validator({
                // 在动态添加删除校验规则之前，记得初始化表格校验：
  fields: fieldsArr,
  //动态改变要忽略验证的元素
  ignore: ignoreArr,
  rules: {
                    // 自定义验证函数，具有最大的灵活性
  // myRule: function(el, param, field){
 //     //do something... // }, // 简单配置正则及错误消息
  zimu: [/^[A-Za-z]+$/, '只允许输入字母'],
  zimushuzi: [/^[A-Za-z0-9]+$/, '只允许输入字母和数字'],

  },
  });
  }

    }, 100); //设置定时器时间

  // 表单验证 rule 常规 版本
  // rules 中写js 进行自定义验证
  // $.validator.config({
 //     ignore: ":hidden",//不验证的元素
  //     rules: {
 //         isCompany: function() { //             //console.log($('.group select').val()); //             if($('.group select').val()=='2' || $('.group select').val()=='3'){ //                 return true;//必填
  //             }else{
 //                 return false;//非必填
  //             }
 //         } //     }, //     messages: { //         isCompany: "商家编码不能为空",
 //     }, //     fields: { //         'row[busi_code]': 'required(isCompany);length(6~)' //     } // });
 // 表单验证 ai 版本
  // var validate = Form.api.bindevent($("form[role=form]"));
 // // 表单验证
  // $("#add-form").validator({
 //     fields: { //         "ypchqd_id": "required", //         "yptym": "required", //         "gg": "required", //         "dw": "required", //         "scqy": "required", //         "zbj": "required", //         "zc": "required", //         "tbdm": "required", //         "pzlxr": "required", //         "xldh": "required", //         "fbrq": "required", //     }, //     valid: function (form) { //         var me = this; //         // 提交表单之前，hold住表单，防止重复提交
  //         me.holdSubmit();
 //         // 提交表单
  //         Form.api.submit(me, function (data) {
 //             // 回调函数
  //             Layer.alert(data.msg, {title: __('Operate Result')}, function (index) {
 //                 Layer.close(index); //                 // 成功后返回列表页
  //                 Fast.api.close();
 //             }); //             // 释放hold，可以再次提交
  //             me.holdSubmit(false);
 //         }, function (data) { //             // 回调函数
  //             Layer.alert(data.msg, {title: __('Operate Result')}, function (index) {
 //                 Layer.close(index); //                 // 失败后返回列表页
  //                 Fast.api.close();
 //             }); //             // 释放hold，可以再次提交
  //             me.holdSubmit(false);
 //         }); //     } // });
},

注释的代码请忽略

调用checkform ,在add 与 edit中

add: function () {
            Controller.api.checkForm();
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.checkForm();
            Controller.api.bindevent();
        },

实现截图 如下.

本作品采用《CC 协议》，转载必须注明作者和本文链接