使用jquery.validate组件进行前端数据验证并实现异步提交前验证检查
学习如鹏网掌上组的项目开发,使用到了前端验证,视频里使用的ValidateForm验证框架,但是我使用的Hui的框架中使用的是jquery.validate验证框架
所以自行学习jquery.validate的使用 但是遇到了一个问题,就是我没有使用submit按钮进行提交,而是在button的点击事件中执行异步提交,这里就有一个问题就是要在提交之前先验证数据正确性再进行提交
最终查询官网文档后找到了方法https://jqueryvalidation.org/Validator.form/
validate()方法返回一个validator对象,其中form()方法就是用来验证表单的。如果通过验证规则,则返回true,否则返回false
下面上代码:我的验证规则是写在js代码中的
<form class="form form-horizontal" id="addForm">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机号:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="" placeholder="" id="phonenum" name="phonenum">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>姓名:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="" placeholder="" id="name" name="name" >
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>密码:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="password" class="input-text" value="" placeholder="" id="password" name="password" >
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>确认密码:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="password" class="input-text" value="" placeholder="" id="confirmPassword" name="confirmPassword">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="" placeholder="" id="email" name="email">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>城市:</label>
<div class="formControls col-xs-8 col-sm-9">
<select class="dropDown" id="city" name="cityId" required>
@foreach (var city in Model.Citys)
{
<option value="@city.Id">@city.Name</option>
}
</select>
</div>
</div> <div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色:</label>
@foreach (var role in Model.Roles)
{
<div class="check-box col-xs-4 col-sm-3">
<input type="checkbox" value="@role.Id" id="RoleIds_@role.Id" name="RoleIds">
<label for="RoleIds_@role.Id">@role.Name</label>
</div>
} </div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
<input class="btn btn-primary radius" type="button" id="saveBtn" value=" 提交 ">
</div>
</div>
</form>
下面是js:
function formValidate() {
var result = $("#addForm").validate({
rules: {
phonenum: {
required: true,
minlength: 1,
maxlength:50
},
name: {
required: true,
minlength: 1,
maxlength: 50
},
password: {
required: true,
minlength: 1,
maxlength: 50
},
confirmPassword: {
required: true,
minlength: 1,
maxlength: 50,
equalTo:"#password"
},
email: {
required: true,
email:true
}
},
onsubmit: true,
onfocusout: function (element) { $(element).valid(); },
onkeyup: function (element) { $(element).valid(); } });
return result;
}
$(function () {
formValidate();
$("#saveBtn").click(function () { if (formValidate().form()) {
var formData = $("#addForm").serializeArray();
$.ajax({
url: "/AdminUser/Add",
type: "post",
data: formData,
dataType: "json",
success: function (res) {
if (res.status == "ok") {
parent.location.reload();
} else {
alert("error");
}
},
error: function (res) {
alert("内部错误");
}
});
} }); });
使用jquery.validate组件进行前端数据验证并实现异步提交前验证检查的更多相关文章
- javascprit form表单提交前验证以及ajax返回json
1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- MVC笔记2:mvc+jquery.validate.js 进行前端验证
1.引用如下js和css 代码 <link href="@Url.Content("~/Content/Site.css")" rel="sty ...
- jQuery Validate验证框架详解,提交前验证
现在都用h5表单进行验证了,以下方式仅做回忆 https://www.runoob.com/jquery/jquery-plugin-validate.html <!DOCTYPE HTML P ...
- jQuery validate在没有校验通过的情况下拒绝提交
下面通过一个简单的例子说明,这个问题,可能是很多人遇到的,验证不通过的时候,依然提交了表单. HTML <form class="survey" id="surve ...
- jquery.form.js 使用以及问题(表单异步提交)
标注:我引用的js后报错 原因:是引用的js有冲突 我引用了两便jQuery: 转载:https://blog.csdn.net/cplvfx/article/details/80455485 使用方 ...
- Html form 表单提交前验证
可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. 直接看下面的代码: 1 & ...
- a 标签提交前验证
最近在做验证的时候遇到了submit()与onsubmit()事件冲突的问题,本来想在a标签中添加submit()进行表单的提交,然后在 form中添加onsubmit事件触发验证方法.结果行不通,最 ...
- HTML:<input type="text"> 输入数字时的验证!(在提交时验证)
<!--非负数:<input type="text" name="" pattern="^\d+$">--> < ...
随机推荐
- PoisonTap - 在锁屏电脑上窃取cookies,获得电脑路由,安装网络后门的工具
工具地址:https://samy.pl/poisontap/ 当PoisonTap(由Raspberry Pi Zero & Node.js开发)接入到一个锁屏或者用密码保护的电脑上时,它可 ...
- 【Leetcode周赛】从contest-41开始。(一般是10个contest写一篇文章)
Contest 41 ()(题号) Contest 42 ()(题号) Contest 43 ()(题号) Contest 44 (2018年12月6日,周四上午)(题号653—656) 链接:htt ...
- spring cloud学习笔记三 Feign与Ribbon负载均衡的区别
一.Feign的介绍 Feign一般比较书面的解释是:Feign是一个声明式的WebService客户端,使用Feign编写的WebService客户端更加简单,他的使用方法是定义一个接口,然后在上线 ...
- Java中实现线程同步的三种方法
实现同步的三种方法 多线程共享数据时,会发生线程不安全的情况,多线程共享数据必须同步. 实现同步的三种方法: 使用同步代码块 使用同步方法 使用互斥锁ReetrantLock(更灵活的代码控制) 代码 ...
- 获取当前的方法名字,运用线程类Thread
得到当前方法的名字String methodName = Thread.currentThread().getStackTrace()[1].getMethodName(); getStackTrac ...
- hdu 5868:Different Circle Permutation 【Polya计数】
似乎是比较基础的一道用到polya定理的题,为了这道题扣了半天组合数学和数论. 等价的题意:可以当成是给正n边形的顶点染色,旋转同构,两种颜色,假设是红蓝,相邻顶点不能同时为蓝. 大概思路:在不考虑旋 ...
- 记录从现在开始,我的第一篇blog
最近在读刘未鹏的<暗时间>,深受作者的启发,决定开始书写blog. 书写是为了更好的思考,希望自己能持之以恒的坚持做这件事情. 这本书很推荐给所有同学,不仅关于时间管理,执行力,心理学, ...
- php7和MongoDB插入并读取数据
php7和MongoDB插入并读取数据 代码如下: <?php $manager = new MongoDB\Driver\Manager("mongodb://localhost:2 ...
- 01 【零基础入门】html学习笔记(1)
之前学习了前端的一些基础知识,现在想深入地.精通地学习前端,往前端和全栈工程师方向发展. 之前学习前端主要是通过看视频,结合动手练习.现在认为看书+视频+实践,应该是最高效的学习方法.对于html.c ...
- (转)springboot应用启动原理(一) 将启动脚本嵌入jar
转:https://segmentfault.com/a/1190000013489340 Spring Boot Takes an opinionated view of building prod ...