阅读量:0
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件-jqu，通过使用jQuery Validate插件实现表单验证，以及使用jQuery UI Autocomplete插件实现自动完成提示。
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件-jqu
表单验证插件
1、引入表单验证插件
要使用表单验证插件，首先需要在HTML文件中引入jQuery库和jQuery Validate插件的CSS文件和JS文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单验证示例</title> <!-引入jQuery库 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-引入jQuery Validate插件的CSS文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/jquery.validation/1.19.2/jquery.validate.min.css"> <!-引入jQuery Validate插件的JS文件 --> <script src="https://cdn.staticfile.org/jquery.validation/1.19.2/jquery.validate.min.js"></script> </head> <body> <!-表单代码 --> </body> </html>
2、编写表单代码
在<body>标签内编写表单代码，如下所示：
<form id="myForm"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <br> <label for="email">邮箱：</label> <input type="email" id="email" name="email" required> <br> <label for="pwd">密码：</label> <input type="password" id="pwd" name="pwd" required> <br> <input type="submit" value="提交"> </form>
3、编写JavaScript代码实现表单验证
在<script>标签内编写JavaScript代码，如下所示：
$(document).ready(function() { $("#myForm").validate({ rules: { username: { required: true, minlength: 2, maxlength: 10 }, email: { required: true, email: true }, pwd: { required: true, minlength: 6 } }, messages: { username: { required: "请输入用户名", minlength: "用户名长度不能小于2个字符", maxlength: "用户名长度不能大于10个字符" }, email: { required: "请输入邮箱地址", email: "请输入有效的邮箱地址" }, pwd: { required: "请输入密码", minlength: "密码长度不能小于6个字符" } } }); });自动完成提示插件
1、引入自动完成提示插件
要使用自动完成提示插件，首先需要在HTML文件中引入jQuery库和jQuery UI插件的CSS文件和JS文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自动完成提示示例</title> <!-引入jQuery库 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-引入jQuery UI插件的CSS文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/jquery.ui/1.12.1/jquery-ui.min.css"> <!-引入jQuery UI插件的JS文件 --> <script src="https://cdn.staticfile.org/jquery.ui/1.12.1/jquery-ui.min.js"></script> </head> <body> <!-输入框代码 --> </body> </html>
2、编写输入框代码
在<body>标签内编写输入框代码，如下所示：
<input type="text" id="autoCompleteInput" placeholder="请输入关键词">
3、编写JavaScript代码实现自动完成提示功能
在<script>标签内编写JavaScript代码，如下所示：
$(document).ready(function() { var data = ["苹果", "香蕉", "橙子", "葡萄", "柠檬"]; $("#autoCompleteInput").autocomplete({ source: data }); });相关问题与解答：
问题1：如何在表单验证中自定义验证规则？
答：可以通过在rules对象中添加自定义规则来实现，如果要验证用户名是否为数字，可以添加如下规则：
username: { required: true, minlength: 2, maxlength: 10, digits: true }问题2：如何在自动完成提示插件中自定义显示格式？
答：可以通过设置autocomplete方法的select事件来实现，如果要在选中某个选项时显示该选项的描述信息，可以添加如下代码：
$("#autoCompleteInput").autocomplete({ source: data, select: function(event, ui) { alert("您选择了：" + ui.item.value); } });各位小伙伴们，我刚刚为大家分享了有关“从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件-jqu”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
