当前位置: 首页 > 编程笔记 >

如何使用jQuery验证表单?

翟黎明
2023-03-14
本文向大家介绍如何使用jQuery验证表单?,包括了如何使用jQuery验证表单?的使用技巧和注意事项,需要的朋友参考一下

首先,您必须制作一个类似html的表单。

<html>
<body>
<h2>Validation of a form</h2>
<form id="form" method="post" action="">
First name:<br>
<input type="text" name="firstname" value="john">
<br>
Last name:<br>
<input type="text" name="lastname" value="Doe">
<br>
Email:<br>
<input type="email" name="u_email" value="johndoe@gmail.com">
<br>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

现在使用jQuery验证插件以更简单的方式验证表单的数据。

首先,在文件中添加jQuery库。

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
then add javascript code:
$(document).ready(function() {
   $("#form").validate();
});
</script>

然后使用简单语法定义规则。

jQuery(document).ready(function() {
   jQuery("#forms).validate({
      rules: {
         firstname: 'required',
         lastname: 'required',
         u_email: {
            required: true,
            email: true,//add an email rule that will ensure the value entered is valid email id.
            maxlength: 255,
         },
      }
   });
});

定义错误消息。

messages: {
   firstname: 'This field is required',
   lastname: 'This field is required',
   u_email: 'Enter a valid email',
},

现在终于提交表格了。

submitHandler: function(form) {
   form.submit();
}
 类似资料:
  • 本文向大家介绍jquery Validation表单验证使用详解,包括了jquery Validation表单验证使用详解的使用技巧和注意事项,需要的朋友参考一下 是一款优秀的插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。本文就是通过讲解这个实例来理解Validation的应用。 本实例涉及到的验证有: 用户名:长度、字符验证,重复性ajax验证(是否已存在)。

  • 我想使用jQuery验证插件验证输入(出生日期),但它必须是“dd/mm/yyyy”格式,并且在年份日期超过2002年时不进行验证。 因此,该日期在格式为“dd/mm/yyyy”且年份超过“2002”时有效

  • 我试图找到一个完整的模式列表,用于通过HTML5表单验证各种类型的输入,特别是、、等等,但我找不到任何模式。目前,这些输入验证的内置版本远非完美(甚至不检查输入的内容是否是电话号码)。所以我想知道,我可以使用哪些模式来验证用户在输入中输入了正确的格式? 以下是一些默认验证允许不允许的输入的例子: 这个字段允许在@后面有不正确域的电子邮件,它允许地址以破折号或句号开始或结束,这也是不允许的。因此,是

  • pre { white-space: pre-wrap; } 本教程将向您展示如何验证一个表单。easyui 框架提供一个 validatebox 插件来验证一个表单。在本教程中,我们将创建一个联系表单,并应用 validatebox 插件来验证表单。然后您可以根据自己的需求来调整这个表单。 创建表单(form) 让我们创建一个简单的联系表单,带有 name、email、subject 和 mes

  • 本文向大家介绍jquery表单验证插件formValidator使用方法,包括了jquery表单验证插件formValidator使用方法的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jquery表单验证插件formValidator的使用方法,供大家参考,具体内容如下 使用步骤: 1.首先在项目中添加必备js与css   2.代码中添加引用(必备引用) 3.<body>中要验证的

  • 问题内容: 我想手动触发验证,包括使用jQueryValidate显示错误消息。 我要完成的方案是这样的形式: 单击时,仅应进行验证。点击时,仅应进行验证。但是,必须张贴所有字段。我怎样才能做到这一点?我考虑过处理click事件并手动验证表单的一部分。 问题答案: 该库似乎允许验证单个元素。只需将click事件与您的按钮相关联,然后尝试以下操作: