搜 索

使用jQuery插件实现常见的一些表单验证输入正确性功能

编辑:QTOOL.NET日期:2019-02-28126

这里我们介绍了使用jQuery的formValidator插件实现一些常规的输入内容正确性检测表单验证功能。

首先新建一个空白页面,将使用到的主要js扩展加载到网页中去。
//加载jQuery类
<script type="text/javascript" src="jquery.js"></script>
//加载表单验证插件
<script type="text/javascript" src="formValidator.min.js"></script>
//加载扩展(可以使用更多扩展功能和正则表达式验证功能)
<script type="text/javascript" src="formValidatorRegex.js"></script>
其中formValidator插件的常见主要函数有如下一些:
inputValiator为针对textarea、input、select的html控件字符长度范围以及selsect选择个数的控制
regexValidator为可以使用正则表达式验证功能
compareValidator 函数可以比较字符串与数值型对象
passwordValidator 检测校验密码强度
functionValidator 校验使用外部的函数
formValidator 可对单个的html控件进行单独配置
defaultPassed 默认校验状态
ajaxValidator 使用ajax实时进行表单检测验证,如注册的时候检测重复用户名邮箱等等
unFormValidator 接触控件验证
$.formValidator.initConfig 全局配置
$.formValidator.pageIsValid 用来处理一个页面的多个提交按钮状况$.formValidator.reloadAutoTip重新定位提示div层位置
$.formValidator.getLength  返回控件的长度以及选择的个数
$.formValidator.serialize   可以将指定的内容序列化且中文不会出现其他乱码$.formValidator.retSetTipState 将提示内容恢复到页面刚打开状态
了解完formValidator插件的常见函数后,我们接下来就可以在利用插件实现一个用户名表单验证效果
在页面form中插入
<form name="form2" id="form2" method="post" action="">
<input name="yonghu" id="yonghu" type="text" />
<span class="onError" id="yonghuTip"></span>
<li>
</form>
然后插入下面js代码
<script type="text/javascript">
$(document).ready(function(){
$.formValidator.initConfig({validatorgroup:"1",formid:"form2",onerror:function(msg){alert(msg)}});
$("#yonghu").formValidator({onshow:"请输入用户名",onfocus:"最多可填写30个字符",oncorrect:"输入正确"}).inputValidator({min:1,max:30,empty:{leftempty:false,rightempty:false,emptyerror:"用户名两边不能空格"},onerror:"用户名不能为空"}).ajaxValidator({
    type : "post",
cache : false,
url : "此处为ajax验证地址",
datatype : "html",
addidvalue : true,
data : "提交的参数如action=name",
success : function(data){
            if(data == "success" ){
                return true;
}else{
                return false;
}
},
buttons: $("#chongshi"),
error: function(){alert("服务器繁忙,请稍后重试");},
onerror : "用户名已存在",
onwait : "正在检测用户名中..."
 
});
</script>
表单验证插件使用示例截图
通过如上的代码就可以实现常见的用户表单用户名验证空白以及字符长度之类的效果,如果想要用户名重复检测的效果,还需要编写ajax请求的服务端代码,通过查询数据库用户表中的用户名验证返回是否重复的信息即可。

TAG标签:js表单
此文章由QTOOL.NET编辑
最新文章

热门标签