[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 协议》,转载必须注明作者和本文链接
推荐文章: