分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

jquery.validate不使用submit提交 使用button按钮提交 以及使用ajax验证用户名

发布时间:2023-09-06 01:56责任编辑:傅花花关键词:暂无标签

JavaScript部分:

$(function() { ???//表单验证 ???$("#addUserInfo").validate({ ???????rules: { ???????????username: { ???????????????required: true, ???????????????minlength: 2, ???????????????//异步验证 开始 ???????????????remote: { ???????????????????url: "userManage/username.validate",//发送请求的url地址 ???????????????????type: "post", //请求方式 ???????????????????dataType: "json",//接收的数据类型 ???????????????????data: { ???????????????????????username: function () { ???????????????????????????return $("#username").val(); ???????????????????????} ???????????????????}, ???????????????????dataFilter: function (data, type) { //过滤返回结果 ???????????????????????if (data == "true") ???????????????????????????return true; ?//true代表用户名还未存在 ???????????????????????else ?????????????????????????return false; //false代表用户名已经存在 ???????????????????} ???????????????} ???????????????//异步验证 结束 ???????????}, ???????????password: { ???????????????required: true, ???????????????minlength: 5 ???????????}, ???????????confirmpassword: { ???????????????required: true, ???????????????minlength: 5, ???????????????equalTo:"#password" ???????????}, ???????????mobile: { ???????????????required: true, ???????????????minlength: 5, ???????????}, ???????}, ???????messages: { ???????????username: { ???????????????required: "请输入用户名", ???????????????minlength: "用户名必需由两个字母组成", ???????????????remote:"输入的用户名已经存在" ???????????}, ???????????password: { ???????????????required: "请输入密码", ???????????????minlength: "密码长度不能小于 5 个字母" ???????????}, ???????????confirmpassword: { ???????????????required: "请输入密码", ???????????????minlength: "密码长度不能小于 5 个字母", ???????????????equalTo:"两次输入密码不一致" ???????????}, ???????????mobile: { ???????????????required: "请输入手机号", ???????????????minlength: "手机号长度不能小于 5 个字母" ???????????}, ???????} ???});} );/** * 新增用户信息 */function addUser(){ ???var flag = $("#addUserInfo").valid(); ???if(!flag){ ???????//没有通过验证 ???????return; ???} ???var data = $("#addUserInfo").serializeObject(); ???$.ajax({ ???????secureuri : false, //是否需要安全协议,一般设置为false ???????fileElementId : ‘file_path‘, ???????type:"post", ???????dataType:‘json‘, ???????data:data, ???????url:"userManage/adduser.do", ???????success:function(json){ ???????????alert(json.message); ???????????$("#addUserInfo input[name=‘username‘]").val(""); ???????????$("#addUserInfo input[name=‘password‘]").val(""); ???????????$("#addUserInfo input[name=‘confirmpassword‘]").val(""); ???????????$("#addUserInfo input[name=‘mobile‘]").val(""); ???????????if(json.success){ ???????????????dataTable1.draw(); ???????????} ???????} ???});}

html部分:

<div class="box box-primary" style="width:30%;"> ???<div class="box-header with-border"> ???????<h3 class="box-title">新增用户信息</h3> ???</div> ???<form role="form" id="addUserInfo"> ???????<div class="box-body"> ???????????<div class="form-group"> ???????????????<label for="username">姓名</label> ???????????????<input type="text" class="form-control" id="username" ?name="username" placeholder="Enter username" /> ???????????</div> ???????????<div class="form-group"> ???????????????<label for="password">密码</label> ???????????????<input type="password" class="form-control" id="password" name="password" placeholder="Password" /> ???????????</div> ???????????<div class="form-group"> ???????????????<label for="confirmpassword">再次输入密码</label> ???????????????<input type="password" class="form-control" id="confirmpassword" name="confirmpassword" placeholder="Confirm Password" /> ???????????</div> ???????????<div class="form-group"> ???????????????<label for="mobile">电话</label> ???????????????<input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile" /> ???????????</div> ???????</div> ???????<div class="box-footer"> ???????????<button type="button" onclick="addUser()" class="btn btn-primary">新增</button> ???????????<button type="reset" class="btn btn-primary">重置</button> ???????</div> ???</form></div>

jquery.validate不使用submit提交 使用button按钮提交 以及使用ajax验证用户名

原文地址:https://www.cnblogs.com/xxaxx/p/9087347.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved