从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件-jqu，通过使用jQuery Validate插件实现表单验证，以及使用jQuery UI Autocomplete插件实现自动完成提示。从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件-jqu1、引入表单验证插件
要使用表单验证插件，首先需要在HTML文件中引入jQuery库和jQuery Validate插件的CSS文件和JS文件。
表单验证示例 <ｓｃｒｉｐｔ src="https://code.jquery.com/jquery-3.6.0.min.js"> <ｓｃｒｉｐｔ src="https://cdn.staticfile.org/jquery.validation/1.19.2/jquery.validate.min.js">
2、编写表单代码
在标签内编写表单代码，如下所示：
3、编写JavaScript代码实现表单验证
在<ｓｃｒｉｐｔ>标签内编写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文件。
自动完成提示示例 <ｓｃｒｉｐｔ src="https://code.jquery.com/jquery-3.6.0.min.js"> <ｓｃｒｉｐｔ src="https://cdn.staticfile.org/jquery.ui/1.12.1/jquery-ui.min.js">
2、编写输入框代码
在标签内编写输入框代码，如下所示：
3、编写JavaScript代码实现自动完成提示功能
在<ｓｃｒｉｐｔ>标签内编写JavaScript代码，如下所示：
$(document).ready(function() { var data = ["苹果", "香蕉", "橙子", "葡萄", "柠檬"]; $("#autoCompleteInput").autocomplete({ source: data });});相关问题与解答：
问题1：如何在表单验证中自定义验证规则？
答：可以通过在rules对象中添加自定义规则来实现，如果要验证用户名是否为数字，可以添加如下规则：
username: { required: true, minlength: 2, maxlength: 10, digits: true}问题2：如何在自动完成提示插件中自定义显示格式？
答：可以通过设置autocomplete方法的ｓｅｌｅｃｔ事件来实现，如果要在选中某个选项时显示该选项的描述信息，可以添加如下代码：
$("#autoCompleteInput").autocomplete({ source: data, ｓｅｌｅｃｔ: function(event, ui) { alert("您选择了：" + ui.item.value); }});各位小伙伴们，我刚刚为大家分享了有关“从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件-jqu”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
本文地址：https://www.shjdjh.com/news/81188.html
免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：cloudinto#qq.com（把#换成@）
