validate jquery怎么判断一个表单是不是通过验证

Posted 2023-05-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了validate jquery怎么判断一个表单是不是通过验证相关的知识，希望对你有一定的参考价值。

validate jquery判断一个表单是否通过验证的方法是看页面是否发生跳转。
如果通过验证那么跳转页面，否则停留在原页面进行提示错误。
<html>
<head>
<title></title>
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="../Scripts/jquery.metadata.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function ()
//validate自定义验证
jQuery.validator.addMethod("isZipCode", function (value, element)
var tel = /^[0-9]6$/;
return this.optional(element) || (tel.test(value));
, "请正确填写您的邮政编码");

$("#signupForm").validate(
rules:
firstname: "required",
ybno:
isZipCode: true
,
email:
required: true, //表示不得为空
email: true //自带邮箱验证
,
password:
required: true,
minlength: 5 //自带判断字符最小长度
,
confirm_password:
required: true,
minlength: 5,
equalTo: "#password"
//自带判断当前文本框值与指定ID为password的文本框的值是否相同

,
messages:
firstname: "请输入姓名",
email:
required: "请输入Email地址",
email: "请输入正确的email地址"
,
password:
required: "请输入密码",
minlength: jQuery.format("密码不能小于0个字符")
,
confirm_password:
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"

);
);

</script>
//错误提示信息的样式
<style type="text/css">
label.errorcolor: Red;padding-left: 20px; border:1px solid #006655; margin-left:10px;
padding-left:0px; font-size:12px;
input.errorborder: solid 1px red;
</style>
</head>
<body>
<form id="signupForm" method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="ybno">邮编</label>
<input id="ybno" name="ybno" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p> 参考技术A 判断一个表

Vue如何使用vee-validate表单验证

Vue项目遇到要表单验证了吧，对我来说表单验证是个很纠(dan)结(teng)的内容，各种判断凌乱到飞起。往常使用jquery的validate插件做表单验证方便吧，你也可以在Vue里引入jquery的validate插件(如何引入jquery在我上一篇博文有介绍，点击查看)。但是我们是做vue项目也，不到实在解决不了还是建议不要引入，因为Vue自己就有表单验证的插件，那就是vee-validate。

我在这并不是详细讲解vee-validate的使用功能，只是快速了解如何在项目里使用vee-validate，做项目时哪有那么多时间让你去熟悉一个插件，肯定先搞定了再说，具体熟悉掌握了解请自行查阅相关资料。
1.npm安装vee-validate：npm install vee-validate --save --registry=https://registry.npm.taobao.org --verbose

2.安装成功后在main.js中引入：

3.在你要进行表单验证的input标签加入相关的代码：

注意：(1)errors打印出来是这样的：{ "item": [ { "id": "_9e6hk2qh2", "field": "email", "msg": "email 是必须的", "rule": "email", "scope": null } ] }，span标签通过errors的几个方法来进行显示隐藏和提示错误，这里列出几个常用的errors方法：

errors.first(\'field\')：当前field的第一个错误信息，字符串

errors.collect(\'field\')：当前field的所有错误信息，数组列表

errors.has(\'field\')：当前filed是否有错误，布尔值

errors.all()：当前表单所有错误，数组列表

errors.any()：当前表单是否有任何错误，布尔值

(2)v-validate="\'required | email\'"有两个验证，一个是为空验证，一个是输入错误验证，你想要多少种验证就在这里写。比如你要限制字数，那就加多个max，即v-validate="\'required | email | max:9\'"。

(3)name属性一定要写，span标签是展示错误提示的。其实此时已经基本完成表单验证了，只是出现的提示是插件提供的默认提示，比如email的错误提示如下图所示，这肯定不是我们想要的，我们需要定义一下。