jQuery Validator before 前置处理器演示页面 - DIY：代码在线编辑与演示页面

代码类型:

杂项:

启用CSS/JS语法检查
监测脚本运行错误
禁止库文件重复

文档类型:

JS库文件:

手动添加:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery Validator 演示页面</title>		
	</head>
<body>
<form action="https://codeplayer.vip/">
    <div>
        <label>用户类型</label>：
        <select id="userType" name="userType">
            <option value="">==请选择==</option>
            <option value="1">普通用户</option>
            <option value="2">客服</option>           
        </select>
    </div>
    <div>
        <label>QQ号码</label>：
        <input id="QQ" name="QQ" type="text" >
    </div>
    <div>
        <label>年龄</label>：
        <input id="age" name="age" type="text" >
    </div>
    <input type="submit" value="提交" />
</form>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://codeplayer.vip/app/static/js/layer/layer.js"></script>
<script src="https://codeplayer.vip/app/static/js/jquery-validator-1.3.js"></script>
<script type="text/javascript">
	// 为了让提示更美观，扩展jQuery原型对象，添加layer的tips方法
	$.fn.tips = function(msg, delay){
		layer.tips(msg, this, delay || 3000);
	};

var v = new V();

// 在表单提交时执行校验
	$("form").v("submit", {
		"#userType": "required",
		"#QQ": {
			// 只有客服必须输入QQ号码，其他用户类型无需校验
			before: function(value, context){
				return $("#userType").val() == "2"; 
			},
			format: "number",
			length: "[5,10]"
		},
		"#age": {
			// 如果是客服，必须年满18岁，其他用户类型无限制
			before: function(value, context){
				context.rule.range = $("#userType").val() == "2" ? "[18,]" : "[0,]";
			},
			format: "number",
			range: "[18,]"
		}
	});
</script>
</body>
</html>

相关文章:

代码类型:

杂项:

文档类型:

JS库文件:

手动添加: