详细阐述form.val使用方法

一、form.value

使用form.val方法可获取表单的值，但在获取之前必须先渲染出表单，即使用form.render()方法。在表单渲染完成后，可以通过form.value获取表单的值，返回一个字典对象，键为表单中元素的name属性值，值为对应元素的值。例如：

layui.use('form', function(){
  var form = layui.form;
  //渲染表单
  form.render();
  //获取表单值
  var data = form.value('formDemo');
  //data即为表单各元素的值，如：{"title":"这是一个标题","content":"下面是内容","select":"0","checkbox":"on"}
});

以上示例中，name属性值为“formDemo”的表单中包含了一个文本框、一个文本域、一个下拉框和一个复选框，通过form.value()方法可以获取各元素的值。

二、form.validate(destroy)

使用form.validate方法可进行表单验证，传入destroy参数时在验证完成后会销毁当前form对象。在验证之前必须先渲染出表单，即使用form.render()方法。验证完成后，如果表单验证成功返回true，否则返回false。例如：

layui.use('form', function(){
  var form = layui.form;
  //渲染表单
  form.render();
  //验证表单
  if(form.validate()){
    //表单验证成功
  }else{
    //表单验证失败
  }
});

以上示例中，在表单渲染完成后，使用form.validate()方法进行表单验证，判断表单验证是否成功。

三、form.value 报变量

在表单中使用了赋值的方式对表单元素进行初始化，如果使用form.val方法获取表单值会发现表单值为undefined。在这种情况下可以使用form.val方法进行赋值，如：

layui.use('form', function(){
  var form = layui.form;
  //渲染表单
  form.render();
  //初始化表单元素
  var title = "这是一个标题";
  var select = "0";
  //赋值
  form.val('formDemo', {
    "title": title,
    "select": select
  });
  //获取表单值
  var data = form.value('formDemo');
  //data即为表单各元素的值，如：{"title":"这是一个标题","content":"","select":"0","checkbox":""}
});

以上示例中，在表单渲染完成后，使用form.val()方法对表单中的元素进行了赋值，接着使用form.value()方法获取表单值并赋值给变量data。

四、form.val赋值

通过form.val方法对表单元素进行赋值，可以设置单个元素或设置多个元素的值。如在表单中存在一个文本域，可通过以下方式设置其值：

layui.use('form', function(){
  var form = layui.form;
  //渲染表单
  form.render();
  //对表单元素进行赋值
  form.val('formDemo', {
    "content": "下面是内容"
  });
});

以上示例中，使用form.val()方法对表单中name属性值为“content”的文本域进行了赋值，将文本域的值设置为“下面是内容”。

五、form.validate

使用form.validate方法可进行表单验证，验证通过返回true，否则返回false。在验证之前必须先渲染出表单，即使用form.render()方法。例如：

layui.use('form', function(){
  var form = layui.form;
  //渲染表单
  form.render();
  //验证表单
  if(form.validate()){
    //表单验证成功
  }else{
    //表单验证失败
  }
});

以上示例中，在表单渲染完成后，使用form.validate()方法进行表单验证，判断表单验证是否成功。

六、form.val有些值不能渲染

form.val有些值不能渲染，这时需要手动渲染。例如下拉框中的值：

layui.use('form', function(){
  var form = layui.form;
  //手动渲染下拉框
  form.render('select');
  //赋值
  form.val('formDemo', {
    "select": "0"
  });
});

以上示例中，在对下拉框赋值之前需要手动渲染下拉框，通过form.render()的参数控制渲染类型，如“select”表示渲染下拉框。

七、form.validateFields

使用form.validateFields方法可对指定字段进行表单验证，如果验证通过返回true，否则返回false。在验证之前必须先渲染出表单，即使用form.render()方法。例如：

layui.use('form', function(){
  var form = layui.form;
  //渲染表单
  form.render();
  //验证表单字段
  if(form.validateFields('title', function(res){
    if(res){
      //验证通过
    }else{
      //验证失败
    }
  });
});

以上示例中，在表单渲染完成后，使用form.validateFields()方法对指定字段进行表单验证，判断验证是否通过。

八、form.validate_on_submit

通过设置form.validate_on_submit = true，在提交表单时会先进行表单验证。例如：

layui.use('form', function(){
  var form = layui.form;
  //渲染表单
  form.render();
  //设置在提交表单时先进行表单验证
  form.validate_on_submit = true;
});

以上示例中，设置在提交表单时先进行表单验证。

九、form.validate不检验字段问题

在表单中存在一些字段在验证时不需要进行验证，可以通过给这些字段添加“novalidate”属性实现。例如：

标题

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/187969.html