詳細闡述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/zh-hk/n/187969.html