### jQuery实现简易移动端验证表单知识点详解
#### 知识点一：jQuery基础和表单验证
在本文中，我们主要关注如何使用jQuery来为移动端表单提供简单的验证功能。jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过减少文档查找、事件处理、动画和Ajax交互的时间，极大地简化了HTML文档遍历和操作、事件处理、动画和Ajax。
#### 知识点二：表单验证的必要性
在移动设备上使用表单进行数据收集时，数据的准确性和完整性至关重要。表单验证能够帮助我们确保用户正确填写了所有必要的信息，以及信息的有效性，例如非空检查、数值检查和格式验证等。
#### 知识点三：示例代码解析
本文中提到了一些关键的代码片段，这些代码段展示了如何利用jQuery进行表单验证：
- **页面加载后验证：**
```javascript
function velidate(){
var flag = true;
var n = $('#item_name');
var p = $('#price');
var r = $('#reserve');
if (n.val() == "") { flag = false; }
if (p.val() == "0" || p.val() == "") { flag = false; }
if (r.val() == "0" || r.val() == "") { flag = false; }
return flag;
}
```
上述代码定义了一个`velidate`函数，用于验证表单字段。这个函数检查了三个字段`item_name`、`price`和`reserve`是否填写，如果任何一个字段为空或者填写不正确，就会返回`false`。
- **表单字段绑定事件：**
```javascript
var n = $('#item_name');
var p = $('#price');
var r = $('#reserve');
n.on({ blur: function() { show(velidate()); } });
p.on({ blur: function() { show(velidate()); } });
r.on({ blur: function() { show(velidate()); } });
```
这段代码通过为输入框绑定`blur`事件来实现，当输入框失去焦点时会自动调用`show(velidate())`，从而进行验证。如果表单验证失败，页面上会有相应的提示。
- **验证失败后的提示：**
```javascript
function show(flag){
if (flag) {
$(".down-complete-btn").css("background-color", "#b02125");
} else {
$(".down-complete-btn").css("background-color", "#8f8f8f");
}
}
```
`show`函数通过修改按钮的背景颜色来给用户直观的反馈，如果验证成功按钮颜色变为红色，否则保持灰色。
- **提交前的验证：**
```javascript
function check(){
var n = $('#item_name');
var p = $('#price');
var r = $('#reserve');
if (n.val() == "") { n.focus(); return false; }
if (p.val() == "0" || p.val() == "") { p.focus(); return false; }
if (r.val() == "0" || r.val() == "") { r.focus(); return false; }
return true;
}
```
`check`函数会在用户点击提交按钮之前调用，它会自动聚焦到缺失或填写错误的字段，并阻止表单提交，直到所有字段都正确填写。
- **Ajax提交表单数据：**
```javascript
$(".down-complete-btn").click(function(){
if (Add.check()){
$.ajax({
type: 'post',
dataType: 'json',
data: {
id: $("#item_id").val(),
name: $("#item_name").val(),
price: $("#price").val(),
photos: $("#photos").val()
},
cache: false,
url: '/main/goods/add',
success: function(data){
if(data.code == 1){
alert("修改成功");
} else {
console.log(data);
}
},
error: function(){
alert('网络异常');
}
});
}
});
```
当用户点击提交按钮时，如果`check`验证通过，则会通过Ajax发送数据到服务器端。这段代码展示了如何使用jQuery的`$.ajax`方法，它通过POST请求发送表单数据，并处理服务器的响应。
#### 知识点四：模块化与依赖管理
在最后部分的代码中，我们看到了`easy_form_validate.js`文件的引入，它使用了`require.js`来管理依赖和模块化。
```javascript
require.config({
paths: {
"jquery": "./lib/jquery-1.11.1.min",
"icon_Upload": "./icon_Upload"
}
});
require(['jquery', 'icon_Upload'], function(){
Add.bindBlur();
Add.postData();
});
```
这里，`require.js`被用于配置和加载依赖。`paths`配置了各依赖库的路径，`require`函数加载了`jquery`和`icon_Upload`模块，并在加载完成后执行了一个回调函数，该回调函数初始化了表单验证和数据提交的行为。
#### 知识点五：样式和交互设计
在实现表单验证时，样式和交互的设计也非常重要。一个好的用户体验会考虑在用户提交信息时给予明确的反馈，包括输入字段失去焦点时的即时验证反馈和提交按钮的点击反馈。
#### 总结
本文通过对代码片段的逐一解析，介绍了如何使用jQuery实现移动端表单验证的基本方法。从初始化验证，到绑定事件、执行验证、反馈结果、阻止错误提交，再到最终通过Ajax发送数据，每一步都充分考虑了用户体验和数据有效性。同时，通过模块化的思想和`require.js`的使用，使得代码结构更清晰，易于维护和扩展。
