validform表单验证插件

发表于2017-01-19 10:30:05

分享一个表单验证插件,这个插件是一个轻量级插件,一般只需要引用一个js文件就行。

首先上一下效果图,当我什么内容不输入时这个插件的提示效果。

QQ截图20170119102155.png


下面是当鼠标点击输入框  不输入之后鼠标离开的效果

QQ截图20170119102219.pngQQ截图20170119105949.png

好了,现在开始介绍这个插件的用法,首先需要下载官网的插件文件 ,官网链接validform.rjboy.cn/document.html

下载完成之后,我们只需要引用他的Validform_v5.3.2_min.js 这个文件就行,不过要注意一下引用这个插件之前必须要引用jquery 1.34以上版本,官网有详细的说明解释。还有就是必须复制他的提示错误的样式和3个小图片到你自己的项目,具体的代码在他的css文件夹style.css里面从/*==========以下部分是Validform必须的===========*/开始到最后。


下面直接上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>
<script type="text/javascript" src="passwordStrength-min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<form class="registerform" action="url">
	<div class="tableBox">
		<p>validform表单验证</p>
		<table cellspacing="0">
			<tr>
				<td>用户名:</td>
				<td><input type="text" class="inputxt" datatype="*6-16" /></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td>
					<input type="password" class="inputxt" name="password" plugin="passwordStrength" datatype="*6-16" errormsg="密码至少6个字符,最多16个字符!" />
					<div class="passwordStrength disinline">密码强度: <span>弱</span><span>中</span><span class="last">强</span></div>
				</td>
			</tr>
			<tr>
				<td>确认密码:</td>
				<td><input type="password" class="inputxt" name="repassword" recheck="password" datatype="*6-16" errormsg="两次输入的密码不一致!" /></td>
			</tr>
			<tr>
				<td>邮箱:</td>
				<td><input type="text" datatype="e" nullmsg="请输入邮箱" errormsg="请输入正确的邮箱!" /></td>
			</tr>
			<tr>
				<td>手机号:</td>
				<td><input type="text" datatype="m" nullmsg="请输入手机号" errormsg="请输入正确的手机号!" /></td>
			</tr>
			<tr>
				<td>留言:</td>
				<td><input type="text" datatype="*" /></td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="提交" class="j-submit" />
				</td>
			</tr>
		</table>
	</div></form>
</body>
</html>

然后是js代码

// JavaScript Document
$(function () {
	$(".registerform").Validform({
        tiptype: 4,
        btnSubmit: ".j-submit",
        showAllError: !0,
        ajaxPost: !0,
        datatype: {
            n30: /^(?:[1-9]\d?|[1234]\d{2}|30)$/
        },
        usePlugin:{
			passwordstrength:{
				minLen:6,
				maxLen:16
			}
		},
        callback: function(a) {

        }
    });
});

页面的css代码是我自己简单写的布局,不重要所以略掉....

这个插件的用法很简单,其实这段javascript可以简写成

$(".registerform").Validform({
        tiptype: 4,
});

引用了js文件之后,只需要在js里面绑定jquery方法就行,这里的resigterform是我给form标签取的class,只需要通过表单外层的clsss名绑定这个方法就行,然后定义提示方式就行。一般提示方式用4比较好,效果是上面的图,其他效果也可以去看官网api。

然后输入框的输入规则是通过一个datatype绑定的  

   "*":/[\w\W]+/,                       不能为空
   "*6-16":/^[\w\W]{6,16}$/,     6到16位任意字符
   "n":/^\d+$/,                          必须填数字
   "n6-16":/^\d{6,16}$/,            必须填6到16位数字
   "s":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]+$/,          不允许输入特殊字符
   "s6-18":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]{6,18}$/,      必须填写6到18位字符
   "p":/^[0-9]{6}$/,                    必须填写邮政编码
   "m":/^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$/,         手机号
   "e":/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,       邮箱
   "url":/^(\w+:\/\/)?\w+(\.\w+)+.*$/                                        网址
假如必须输入手机号 <input type="text" datatype="m"/> 这样绑定datatype就行了,这些是插件本身已经封装好了的几个常用正则可以直接用就行。如果需要其他效果,可以自己定义datatype,比如我上面的js代码
           datatype: {
           n30: /^(?:[1-9]\d?|[1234]\d{2}|30)$/       输入不超过30个字符
       }
       直接在方法里面定义正则,然后datatype="n30"就行。
其他参数说明
btnSubmit: ".j-submit"   这个是绑定提交事件的,class绑定给提交按钮就行,当用户什么都不输入直接点确定,会达到上面图1的效果。

showAllError: !0        这个是是否提示所有input输入框的错误如图1,如果设为false那么图一的情况只提示第一个Input为空  

ajaxPost: !0,              这个是ajax提交设为true。

input框里面nullmsg是没输入的时候提示的文字,errormsg是输入错误的时候提示的文字。如果没有定义这两个参数,那么插件将提示默认的文字信息。
基本的用法就这3步,引入插件,js绑定好事件,input输入框定义好正则。有不会的正则或者不明白的参数可以去看官网说明文档。validform.rjboy.cn/document.html  


其他
我上面的这个dome其实还有一个功能,也是插件提供的,就是密码强度验证和两次输入密码验证。
这个功能需要引入另外一个js文件 passwordStrength-min.js ,这个文件从下载的文件夹里面可以找到,用法也很简单。
输入密码Input 框里面加上name="password" plugin="passwordStrength"   后面加上
<div class="passwordStrength">密码强度: <span>弱</span><span>中</span><span class="last">强</span></div>
确认密码input框加上name="repassword" recheck="password"   就行。

要注意的是密码强度div 的class必须叫这个,当选中到哪个强度时,插件会给span加上一个class,我们去用的时候只需要自定义样式就行。

效果如图三



评论(0)

请先登录后再评论,如果没有账号请先注册

发表评论