parsley.js添加表单验证功能,直接在html元素中添加对应属性;
parsley.js验证固定长度没有对应属性,data-parsley-length="[2, 2]"提示:字符长度应该在 2 到 2 之间;data-parsley-pattern="\d{2}"提示:格式不正确。 提示的信息都不能表达字符串长度为定长2。
示例见下方:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>parsley-属性测试</title>
</head>
<body>
<form data-parsley-validate>
<div>
<label for="userName">姓名:</label>
<input type="text" />
</div>
<div>
<label for="email">邮箱:</label>
<input type="text" />
</div>
<div>
<label for="age">年龄:</label>
<input type="text" />
</div>
<div>
<label for="age1">测试trigger:</label>
<input type="text" />
</div>
<div>
<label for="salary">薪资:</label>
<input type="text" />
</div>
<div>
<label for="deposit">存款:</label>
<input type="text" />
</div>
<div>
<label for="extractedCode">提取码</label>
<input type="text" />
</div>
<div>
<label for="personWebSite">个人网站:</label>
<input type="text" />
</div>
<div>
<label for="hobby">特长:</label>
<input type="text" />
</div>
<div>
<label for="minValue">最小值:</label>
<input type="text" />
</div>
<div>
<label for="maxValue">最大值:</label>
<input type="text" />
</div>
<div>
<label for="rangeValue">数值范围:</label>
<input type="text" />
</div>
<div>
<label for="regularExpression">正则表达式:</label>
<input type="text" />
</div>
<div>
<label>最少选中几项复选:</label>
<input type="checkbox" name="xCheckbox" data-parsley-required="true"/>
<input type="checkbox" name="xCheckbox" data-parsley-mincheck="2"/>
<input type="checkbox" name="xCheckbox"/>
</div>
<div>
<label>最多选中几项复选:</label>
<input type="checkbox" name="yCheckbox" data-parsley-required="true"/>
<input type="checkbox" name="yCheckbox" data-parsley-maxcheck="2"/>
<input type="checkbox" name="yCheckbox"/>
</div>
<div>
<label>选中几项复选(范围):</label>
<input type="checkbox" name="zCheckbox" data-parsley-required="true"/>
<input type="checkbox" name="zCheckbox" data-parsley-check="[1,2]"/>
<input type="checkbox" name="zCheckbox"/>
</div>
<div>
<label>密码:</label>
<input type="password" />
<input type="password" data-parsley-equalto="#password1"/>
</div>
<div>
<input type="submit" value="提交"/>
</div>
</form>
<script src="../jquery-1.x.min.js"></script><!-- 依赖的jquery版本必须>=1.8 -->
<script src="parsley.min.js"></script>
<script src="i18n/zh_cn.js"></script><!-- 本地化提示信息 -->
<script>
$(function(){
//$('#form').parsley();//调用parsley表单验证插件(提交时才会验证 是否必填和输入格式)
$('#form').parsley().validate();//调用parsley表单验证插件(页面加载时就验证 是否必填和输入格式)
});
</script>
<body>
</html>
1.对于输入框的已提示“必填”、“格式验证”信息,则输入内容切换会立即验证格式和是否必填;
2.parsley()和parsley().validate()
$('#form').parsley();在提交时出现提示信息,之后修改内容就会立即验证。
如果希望加载页面时就提示必填信息,请将$('#form').parsley();改为$('#form').parsley().validate(); 且parsley().validate()会对页面第一个输入框聚焦。
3.data-parsley-trigger="change"改变值后立即验证(第一次输入值change事件后才验证,之后则是输入即验证)。
须注意$('#form').parsley().validate();在加载页面时对未设置必填的项,输入内容也不会及时出现格式错误的提示(不设置必填,加载页面时没提示信息),在提交一次后才触发了提示信息,之后修改输入值才能每次提示错误信息。 针对这种情况可同时添加data-parsley-trigger="change";