antd vue表单验证_antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效（其他验证失效）...

谁借莪１个温暖的怀抱￠ 2022-10-24 05:53 187阅读 0赞

\#\# antd-for-vue 表单验证失效 自定义表单验证使表单非空验证失效(其他验证失效)

\#\#\#\#\# antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll里面可以接收校验字段数组, options, 和一个回调函数

\* 错误代码

\`\`\`javascript

organizationId: \{rules: \[

\{required: true, message: '请输入团支部!'\},

\{ validator: tpMemberCount ,trigger: 'change'\},

\],

\}, //导致失效的地方

//具体验证方法

let tpMemberCount = (rule, value, callback) => \{

console.log(value)

try \{

getAction("/tp/tpOrganization/queryById", \{id: value\}).then((res) => \{

if (res.success) \{

let MemberCount = res.result.tyNumber

console.log(MemberCount)

callback();

if (MemberCount < 1) \{

callback(new Error('该支部下无团员，请重新选择。'));

\}

\} else \{

this.$message.warning("未查询到\[" + res.result.orgName + "\]组织人数，请手动填入");

callback();

\}

\});

\} catch (err)\{

callback();

\}

\};

\`\`\`

\#\#\#\#\# 当不设置自定义校验方法时 其他校验均有效

\* 修改子自定义的校验方法

\* 解决过程代码

\`\`\`javascript

let tpMemberCount = (rule, value, callback) => \{

console.log(1)

getAction("/tp/tpOrganization/queryById", \{id: value\}).then((res) => \{

if (res.success) \{

let MemberCount = res.result.tyNumber

if (MemberCount < 1) \{

callback(new Error('该支部下无团员，请重新选择。'));

console.log(2)

\}else \{

callback()

\}

// if (value == undefined && value == null && value == '')\{

// callback(new Error('请选择请团支部'));

// console.log(3)

// \}

\} else \{

this.$message.warning("未查询到\[" + res.result.orgName + "\]组织人数，请手动填入");

callback();

console.log(4)

\}

\});

callback()

console.log(5)

\};

\`\`\`

!\[image-20200930170852454\](C:\\Users\\milan\\AppData\\Roaming\\Typora\\typora-user-images\\image-20200930170852454.png)

\#\#\# 结论在自定义的验证的方法中出现了问题

\* 修改后正确代码

~~~ javascript

let tpMemberCount = (rule, value, callback) => \{

getAction("/tp/tpOrganization/queryById", \{id: value\}).then((res) => \{

if (res.success) \{

let MemberCount = res.result.tyNumber

if (MemberCount < 1) \{

callback(new Error('该支部下无团员，请重新选择。'));

\}else \{

callback()

\}

\} else \{

this.$message.warning("未查询到\[" + res.result.orgName + "\]组织人数，请手动填入");

callback();

\}

\});

\};

~~~

发表评论取消回复

表情：

评论列表（有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关 antd form表单验证，表单初始值

form.setFieldsValue(initialValues);实现设置初始默认值 form.validateFields()实现对输入的值进行验证完整代码如下：

古城微笑少年丶/ 2022年11月16日 13:42/ 0 赞/ 451 阅读

相关 antd vue表单验证_antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效（其他验证失效）...

\\ antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效(其他验证失效) \\\\\ antd 的表单校验方法包括 validateFields 和

谁借莪１个温暖的怀抱￠/ 2022年10月24日 05:53/ 0 赞/ 188 阅读

相关表单验证

应用一、引入 <script src="Scripts/jquery-1.7.1.min.js"></script> <script src="Scripts/jqu

朱雀/ 2022年07月24日 06:28/ 0 赞/ 442 阅读

相关表单验证

java script验证表单时常用： "^-\[0-9\]\\[1-9\]\[0-9\]\＄"　　//负整数 "^-?//d+＄"　　　　//整

ゝ一纸荒年。/ 2022年06月13日 07:54/ 0 赞/ 273 阅读

相关表单验证

@Min(value = 18, message = " 不得小于18 ") private Integer age; / 表单验证 /

╰+攻爆jí腚メ/ 2022年06月05日 10:15/ 0 赞/ 272 阅读

相关表单验证

angularjs 表单验证，包含必填、手机、邮箱、ip、网址等基于angularjs自己封装的验证插件，之前的插件在angularjs上就不能使用了，然后将之前的封

淩亂°似流年/ 2022年06月04日 10:14/ 0 赞/ 265 阅读

相关表单验证插件 validate （基本表单验证，自定义验证规则）

步骤： (1) 将jquery的原始文件和插件文件jquery.validate.js导入到工程中 (2) 编写js代码对表单进行验证表单验证格式： $("\form

灰太狼/ 2022年04月10日 01:53/ 0 赞/ 398 阅读

相关表单验证

java script验证表单时常用： "^-\[0-9\]\\[1-9\]\[0-9\]\＄"　　//负整数 "^-?//d+＄"　　　　//整

小灰灰/ 2022年01月07日 14:35/ 0 赞/ 416 阅读

相关 elementUI表单验证数字时失效

在写vue+elementUI项目的时候遇到了验证数字失败的问题，解决办法：用‘.number’修饰v-model，例子如下： <el-form-item lab

心已赠人/ 2021年12月12日 15:47/ 0 赞/ 562 阅读

相关 iview 表单验证失效问题

因为我的页面有两个弹窗 form里面的 ref = "expertData" 都叫 expertData 所以表单验证失效 <Modal> <Form ref=

超、凢脫俗/ 2021年11月05日 04:16/ 0 赞/ 600 阅读