layui的表单验证，怎么通过手动触发

Posted 2023-04-18

找到form.js文件，给form拓展方法
参数是你表单所在容器id
返回结果是是否通过验证
u.prototype.doVerify=function(z)
var e = null,
a = f.config.verify,
s = "layui-form-danger",
c = t("#"+z),
d = c.find("*[lay-verify]");
layui.each(d, function (l, r)
var o = t(this),
c = o.attr("lay-verify").split("|"),
u = o.attr("lay-verType"),
d = o.val();
if (o.removeClass(s), layui.each(c, function (t, l)
var c, f = "", v = "function" == typeof a[l];
if (a[l])
var c = v ? f = a[l](d, r) : !a[l][0].test(d);
if (f = f || a[l][1], "required" === l && (f = o.attr("lay-reqText") || f), c) return "tips" === u ? i.tips(f, function ()
return "string" == typeof o.attr("lay-ignore") || "select" !== r.tagName.toLowerCase() && !/^checkbox|radio$/.test(r.type) ? o : o.next()
(), tips: 1) : "alert" === u ? i.alert(f, title: "提示", shadeClose: !0) : i.msg(f,
icon: 5,
shift: 6
), n.android || n.ios || setTimeout(function ()
r.focus()
, 7), o.addClass(s), e = !0

), e) return e
);
return !e;

使用：
layui.form.doVerify(id); 参考技术A 用$.ajax，如果是手动按钮触发的话，就在按钮的click事件中调用ajax，把$("#formId").其他参数传递出去即可。本回答被提问者采纳 参考技术B layui的验证是验证绑定事件中的filter，例如 form.on('submit(filter)'), 你也可以用click(filter)触发， 所以你只需要先绑定验证事件，然后js触发即可

Vue + Vee Validate 3 触发手动验证

【中文标题】Vue + Vee Validate 3 触发手动验证

【英文标题】：Vue + Vee Validate 3 Trigger Manual Validation

【发布时间】：2020-02-29 05:51:36

【问题描述】：

我的表单验证几乎可以工作了——我正在使用 Vee Validate 3 和 Vue.js。 Vee Validate 的大多数示例都是针对版本 2 的，所以我有点挣扎。

我遇到的问题是提交表单时触发验证。

如果我先单击文本字段以关注它，然后单击提交，验证会触发，我会看到错误消息。

但是，如果我不先单击文本字段并仅单击提交按钮，则看不到错误消息。

如何在点击提交之前不必专注于文本字段来完成这项工作？

更新

奇怪的是，控制台在两种情况下都显示错误TypeError: this.validate is not a function - 无论验证是否有效。

<ValidationProvider rules="required" v-slot=" validate, errors ">
  <div>
    <input type="text" rules="required">
    <p id="error"> errors[0] </p>
  </div>
</ValidationProvider>

<script>
export default 
  methods: 
    async validateField() 
      const valid = await this.validate()
    
  
;
</script>

【问题讨论】：

我没有使用 v3.0 但是 1. 你能显示整个代码吗？ 2.你检查ValidationObserver了吗？ logaretm.github.io/vee-validate/guide/…

@Adam，我会试试 ValidationObserver - 它看起来很有希望。我将在这里报告我的发现。谢谢

【参考方案1】：

Adam 通过 ValidationObserver 为我指明了正确的方向。

此代码对我有用...

<ValidationObserver ref="observer" v-slot=" invalid " tag="form" @submit.prevent="submit()">
  <ValidationProvider rules="required" v-slot=" errors ">
    <input type="text">
    <p id="error"> errors[0] </p>
  </ValidationProvider>
  <button @click="submit()">Submit>/button>
</ValidationObserver>

<script>
import  VslidationProvider, ValidationObserver  from 'vee-validate'
import  required  from 'vee-validate/dist/rules'

export default 
  methods: 
    async submit () 
      const valid = await this.$refs.observer.validate()
    
  
;
</script>

【参考方案2】：

新方法

<ValidationObserver v-slot=" handleSubmit ">
  <ValidationProvider rules="required" v-slot=" errors ">
    <input type="text">
    <p id="error"> errors[0] </p>
  </ValidationProvider>
  <button @click="handleSubmit(onSubmit)">Submit>/button>
</ValidationObserver>

<script>
import  VslidationProvider, ValidationObserver  from 'vee-validate'

export default 
  methods: 
    onSubmit() 
      // ...
    
  
;
</script>