js的validate插件异步效验
js代码
$(function () {
$("#regForm").validate({
onsubmit:true,// 是否在提交是验证
onkeyup: false,
//失去焦点验证
onfocusout:function(element){ $(element).valid();},// 是否在获取焦点时验证
rules: {
username: {
required: true,
minlength: 7,
maxlength: 16 ,
remote: {
type: "post",
url: "/nameverify",
data: {
username: function() {
return $("#username").val();
}
// 如果直接写“data: {username: $("#username").val();}”，这样是获取不到值的。
},
dataType: "json",
dataFilter: function(data) {
return data;
}
}
},
password: {
required: true,
minlength: 7,
maxlength: 16
},
secondPassword:{
required: true ,
equalTo: "#password"
}
},
messages:{ //验证错误信息
username: {
required: "请输入用户名" ,
minlength: "至少7位字符" ,
maxlength: "最多16位字符" ,
remote: "用户名已存在"
},
password: {
required: "请输入密码",
minlength: "至少7位字符" ,
maxlength: "最多16位字符"
},
secondPassword:{
required: "请确认密码" ,
equalTo: "密码不一致"
}
},
});
});
html页面
<body >
<form class="form-signin text-center" id="regForm" th:action="@{/toregister}" method="post">
<img class="mb-4" src="/img/Pig_chivalrous_407px_505743_easyicon.net.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">注册</h1>
<label for="username" class="sr-only">用户名</label>
<input name="username" type="text" id="username" class="form-control" placeholder="用户名" >
<label for="password" class="sr-only">密码</label>
<input name="password" type="password" id="password" class="form-control" placeholder="密码" >
<label for="secondPassword" class="sr-only">确认密码</label>
<input name="secondPassword" type="password" id="secondPassword" class="form-control" placeholder="确认密码" style="margin-bottom: 10px;" >
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> 记住我
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
<a class="btn " th:href="@{/login}" >登陆</a>
<p class="mt-5 mb-3 text-muted">© 校园二手交易</p>
</form>
</body>
js导入
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/register.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
springmvc后台响应json
@ResponseBody
@RequestMapping("/nameverify")
public Boolean nameIsExists(String username){
return !localAuthService.isNameExists(username);
}
js的validate插件异步效验的更多相关文章
- validate插件实现表单效验（二）
一款优秀的表单验证插件——validation插件 特点: l 内置验证规则:拥有必填.数字.email.url和信用卡号码等19类内置验证规则 l 自定义验证规则:可以很方便的自定义验证规则 l ...
- validate插件实现表单效验（一）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery Validate 插件[表单验证]
在客户端添加信息提交表单时我们经常需要做一些验证,比如验证不能为空,验证客户输入手机格式,验证客户输入email,url等的格式,我们可以通过EL表达式结合js 进行自主验证,今天总结一个JQuery ...
- jQuery Validate 插件
>>>>>>>>>>>>>>>>>>>>>>>>> ...
- JQuery Validate插件与实现
菜鸟拙见,望请纠正 一:效果展示:以下是两个注册表单验证,左边使用Jquery validate插件实现,右边是自己用JQuery实现,效果差不多,但个人推荐用插件,毕竟前人栽了树而且长大了后人当然好 ...
- validate插件深入学习-01 小白从看透一个插件开始
没有编程基础的的我,即使看了一遍jq文档也不知道怎么写程序,一个新的插件看了也不知道怎么用. 总是想做自己会的,自己不会的永远不去触碰,就永远不会. 都说编程这东西,很多都有很像的地方了,一个语言学通 ...
- jquery.validate插件在booststarp中的运用
现在在网络上已经可以找到很多基于bootstarp的表单认证,但是验证的都不全面的,下载后,我们还要理解作者的思路然后进行修改添加,这种修改方式往往适合学习,时间很多的时候.但是我们很多时候是没有时间 ...
- validate插件的使用
方法如下: 插件: jquery.validate.js jquery.validate.custom.js bootstrap html代码: <form id="form_name ...
- jquery validate form 异步提交
jQuery取得select选中的值 jQuery("#select1 option:selected").text(); 相信很多人都用过jquery validate插件,非 ...
随机推荐
- Linux学习-利用inotify和rsync实现数据的实时同步
一.inotify简介 1.inotify介绍 异步的文件系统事件监控机制,利用事件驱动机制,而无须通过诸如cron等的 轮询机制来获取事件,linux内核从2.6.13起支持 inotify,通过i ...
- react native之使用AsyncStorage 进行数据持久化存储
新建AsncStorageDemoPage.js import React, {Component} from 'react'; import { StyleSheet, View, Text, Bu ...
- M（model）V（view）C（controller,serlvet）,（分） 静态工厂模式，单例模式
- Go实现分布式外部排序
Go实现分布式外部排序 项目路径: https://github.com/Draymonders/go_external_sort 默认读入文件: small.in 默认输出文件:small.out ...
- 特征提取算法（3）——SIFT特征提取算子
目录: 前言 1.高斯尺度空间GSS 2.高斯差分DOG 用DoG检测特征点 GSS尺度选择 3.图像金字塔建立 用前一个octave中的倒数第三幅图像生成下一octave中的第一幅图像 每层octa ...
- 12 November
[SCOI2005] Mine BZOJ 1088: 相信大家都玩过扫雷的游戏.那是在一个 n×m的矩阵里面有一些雷,要你根据一些信息找出雷来.万圣节到了 ,"余"人国流行起了一种 ...
- lunwenzhunbei
1,android sensors introduction http://developer.android.com/guide/topics/sensors/sensors_overview.ht ...
- linux让命令或程序在终端后台运行的方法（Ubuntu/Fedora/Centos等一样适用）
https://segmentfault.com/a/1190000008314935
- PCIE手札
PCIE兼容了大部分PCI总线的特性,区别在于使用串行差分总线代替了并行总线,并实现了协议分层.PCIE的带宽与LANE数量和时钟频率相关,时钟频率支持2.5G和5G,Lane支持x1/x2/x4/x ...
- Python编程:从入门到实践—if 语句
Python编程:从入门到实践—if 语句