举杯邀月

Jquery提交表单验证数据的方法,获取表单序列化值、追加参数的方式

摘要:在很多情况下,HTML元素自带的“校验规则”无法满足功能所需,往往需要获取表单的内容做数据的校验,然后利用AJAX方式进行数据的提交。

$("form").submit(function() {
  let data = $(this).serializeArray();
  // ajax 方式提交
  $.ajax({
      type:'POST',
      url: $(this).attr('action'),
      data: data,
      success: function(res){
          // ……
      }
  });
  return false;
  
  // 如果使用form表单提交,则不用做任何处理,没有return等中断执行,form会直接将表单提交
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

特别说明,元素不能被禁用(禁用的元素不会被包括在内),并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

上面的代码产生下面的数据结构:

[
  {
    name: user_name
    value: '小明'
  },
  {
    name: password
    value: '123123'
  }
]
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

然后可以通过循环获取值进行数据验证,验证成进行数据提交,验证失败return阻止提交。

另外,如果要往序列化的结果中追加值,需要指定name和value:

data.push({"name": "mobile", "value": 15910319594});
1
1
1
1
1
1

作者:举杯邀月

出处: http://www.hug-code.cn/archives/5fdb1e0178ccd.html

2020-10-18 标签: javascript