频道导航

Jquery表单验证插件formValidator使用方法

2019-01-04 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了Jquery表单验证插件formValidator使用方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

使用步骤：

1.首先在项目中添加必备js与css

2.代码中添加引用（必备引用）

3.中要验证的标签（做一些常用的演示）

函数):图片:文件:用户名:

4.

5.效果图：

6.添加修改说明：

$(document).ready(function () {
  $.formValidator.initConfig({ formID: "form1",onError: function () { alert("校验没有通过，具体<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>请看<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a><a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>") } });
  $("#name").formValidator({ onShow: "请输入姓名！",onFocus: "输入一个到十个字符",onCorrect: "输入正确，谢谢您的合作！" }).inputValidator({ min: 1,max: 20,onError: "输入长度，不对！" });
  $("#timelong").formValidator({ onShow: "请输入路演时长！",onFocus: "输入格式为正整数！",onCorrect: "输入正确，谢谢您的合作！" }).regexValidator({ regExp:"intege1",onError: "您输入的时长格式不正确！" });
  $("#address").formValidator({ onShow: "请输入路演平台<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>！",onFocus: "输入一个到五十个字符",max: 50,onError: "输入长度，不对！" });
  $("#urladdress").formValidator({ onShow: "请输入路演<a href="https://www.jb51.cc/tag/lianjiedizhi/" target="_blank" class="keywords">链接地址</a>！",onFocus: "输入格式：http://www.baidu.com",onCorrect: "输入正确，谢谢您的合作！" }).regexValidator({ regExp:"^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&amp;%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|localhost|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&amp;%\$#\=~_\-]+))*$",onError: "输入格式不正确！" });
  $("#time").formValidator({ onCorrect: "格式正确" }).functionValidator({fun:isDateTime,onError: "输入格式，不对！" });
  $("#txtcontent").formValidator({ onShow: "请输入专家简介！",onFocus: "输入一个到一百个字符",max: 100,onError: "输入长度，不对！" });
});

ajax验证用户是否存在

js代码 (html中一定要设置name值，否则动态是获取不到值的)

用户名可以使用，请完善下面信息。" }).regexValidator({ regExp: "username",onError: "你输入的格式不正确！" }).inputValidator({ min: 6,max: 16,onError: "输入长度不正确！" }) .ajaxValidator({ dataType: "text",async: true,url: "Tool/AddUser.ashx",success: function (data) { if (data == "0") { return true; } else if (data == "null") { return "注意：用户名不能少于6个字符。"; } else if (data == "false") { return "该用户名已被注册，请更换用户名。"; } },buttons: $("#button"),error: function (jqXHR,textStatus,errorThrown) { alert("服务器没有返回数据，可能服务器忙，请重试" + errorThrown); },onError: "该用户名不可用，请更换用户名",onWait: "正在对用户名进行合法性校验，请稍候..." }).defaultPassed(); //这里添加defaultPassed()的话，则默认验证通过。

一般处理程序代码

0) { if (isExist(context.Request["userName"].ToString())) { returnStr = "false"; } else { returnStr = "0"; } } else { returnStr = "null"; } context.Response.Write(returnStr); context.Response.End(); #endregion }

#region 判断<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>是否被<a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a>过
public bool isExist(string userName)
{
  Snet.BLL.UserAccount bll = new BLL.UserAccount();
  return bll.Exists(userName);
}
#endregion

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文链接：https://www.f2er.com/jquery/49442.html

表单验证插件formValidator