1、理解：js隐式开发就是在标签中写特定属性和属性值，然后js中通过选择器，选择带有特定属性值的标签，进行操作，至此凡是带有了指定的属性，亦或被匹配到的标签都会执行特定的js代码，进行逻辑处理，从表面上来说给标签赋予了动态行为，这就是隐式开发。
2、使用隐式开发，进行表单校验。在这里有两层含义，表单校验和隐式表单校验，因此需要两个相应的js文件外加一个Juqery文件，我这里也给你们提供，有需要的可自取
https://pan.baidu.com/s/1JDaJXJDQg4MQJrOjITJuTA 提取码：7iwz
3、使用
| 标签属性 | 含义 |
|---|---|
| data-val=“true” | 必须的，表示要对表单进行数据校验 |
| data-val-required="*" | 表示字段是必填字段，如果为空就会提示* |
| data-val-regex="*用户格式不正确" | 正则式验证 |
| data-val-regex-pattern="^[a-zA-Z]\w{5,17}$" | 指定验证正则表达式 |
| data-val-equalto="*两次密码不一致" | 一致性验证，通常用户确定密码 |
| data-val-equalto-other="*.UPwd" | 指定参考的标签，用Name，如此处是与name=UPwd做对比 |
| data-val-date="*日期格式不正确" | 日期格式校验 |
| data-val-range=“商品金额范围不正确” | 数值范围校验 |
| data-val-range-min=“0” | 指定最小数值 |
| data-val-range-max=“100000000” | 指定最大数值 |
4、使用案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="gbk">
<title></title>
</head>
<body>
<form action="#">
<div class="inputbox">
<label for="user">用户名：</label>
<input id="user" type="text" name="LoginName" data-val="true" data-val-required="*必须项" />
<span data-valmsg-for="LoginName" data-valmsg-replace="true" style="color:red;font-size:12px"></span>
</div>
<div class="inputbox">
<label for="mima">密码：</label>
<input id="mima" type="password" name="LoginPwd" placeholder="请输入密码" data-val="true" data-val-required="*" />
<span data-valmsg-for="LoginPwd" data-valmsg-replace="true" style="color:red;font-size:12px"></span>
</div>
<div class="inputbox">
<label for="mima">确定密码：</label>
<input id="mima" type="password" name="RLoginPwd" placeholder="请输入确定密码" data-val="true" data-val-equalto="*两次密码不一致" data-val-equalto-other="*.LoginPwd" />
<span data-valmsg-for="RLoginPwd" data-valmsg-replace="true" style="color:red;font-size:12px"></span>
</div>
<div class="subBtn">
<input type="submit" value="登录" />
<input type="reset" value="重置" />
</div>
</form>
</body>
</html>
<script src="./js/jquery.js"></script>
<script src="./js/jquery.validate.js"></script>
<script src="./js/jquery.validate.unobtrusive.js"></script>
5、自定义隐式开发库，关键点在于js中标签的定位，这里有几个博主自己写的隐式开发，技术有限仅供参考，因为隐式开发，不依托于事件触发，而是依托于标签中的属性给标签注册事件，所以隐式开发的代码均放在页面加载事件中即$(function(){ } );
（1）表单提交，只要在表单的input标签中，添加属性submit=true，即赋予了该标签点击提交表单的功能，该提交调用了check_all自定义表单验证方法
// 使用带有属性submit=true的from提交
$("form input[submit=true]").click(function () {
if (check_all(this)) {
$("form").submit();
}
});
（2）给下拉框或者radio单选框设置默认值，添加属性impl-dev=true，已经selectValue指定要选中的选项value，就可设置该项为选中项
// 隐式开发，为带有impl-dev=true selectValue赋选择初值
$("[impl-dev=true][selectValue]").each(function () {
var value = $(this).attr("selectValue");
$(this).children("option[value=" + value + "]").attr("selected", "selected");
$(this).children("input:radio[value=" + value + "]").attr("checked", "checked");
});
使用案例
<div impl-dev="true" selectValue="2">
<label>用户类别：</label>
<input type="radio" name="UCategory" value="1" />管理员
<input type="radio" name="UCategory" value="2" />经理
<input type="radio" name="UCategory" value="3" />普通用户
</div>
（3）点击跳转，类似于超链接，但是可以指定参数，获取输入，转为参数，使用条件：impl-dev=true，link-to指定跳转的url，para-from=name指定参数来源，使用标签的name属性指定
// <input type="button" value="查询" impl-dev=true link-to="UserInfo/Index" para-from="findName"/>
$("[impl-dev=true][link-to]").click(function () {
var link = $(this).attr("link-to") + "?";
$("[name=" + $(this).attr("para-from") + "]").each(function () {
link += $(this).attr("name") + "=" + $(this).val() + "&";
});
link = link.substring(0, link.length - 1);
$(window).attr('location', link);
});
使用案例
<input type="text" name="paramTest" value="" />
<button impl-dev="true" link-to="file:///F:/代码/隐式校验案例/Login.html" para-from="paramTest">点击</button>
（4）隐式开发，设置第几个li为active
// 隐式开发，设置第几个li为active
$("[impl-dev=true][active-index] li:nth-child(" + $("[impl-dev=true][active-index]").attr("active-index") + ")").attr("id", "active");
（5）页面加载时，发送ajax请求，返回json数据，用于下拉框展示，json数据key作为自动生成option的value值，value就作为option的文本，使用要求impl-dev=“true”，data-url=ajax请求路径，load-one="true"加载一次，auto-tag=“option” 自动生成的标签，selectValue=设置默认选中项，ajax请求必须要返回json格式字符串
if ($("[impl-dev=true][data-url][load-one=true][auto-tag]").attr("data-url") != undefined) {
var node = $("[impl-dev=true][data-url][load-one=true][auto-tag]");
var str = node.html();
var url = node.attr("data-url");
var tag = node.attr("auto-tag");
var selectValue = node.attr("selectValue");
$.get(url, {}, function (data) {
for (var key in data) {
if (key == selectValue) {
str += "<" + tag + " value=" + key + " selected=selected>" + data[key] + "</" + tag + ">";
} else {
str += "<" + tag + " value=" + key + ">" + data[key] + "</" + tag + ">";
}
}
node.html(str);
}, "json");
}
使用案例
<span>供应商：</span>
<select name="proId" id="proId" impl-dev="true" data-url="../Util/AjaxGetAllPro" load-one="true" auto-tag="option" selectValue="@ViewData["proId"]">
<option value="">--请选择--</option>
</select>
（6）ajax单校验，适用于用户名或手机号等是否已存在，当输入框失去焦点时，就会自动发送ajax请求，验证是否合法，使用要求，data-val=true，ajax-url指明ajax请求地址，ajax请求参数为ajaxparam接收时要注意，返回值为ok则表明验证成功，否则验证失败。ajax-check-msg表示验证失败的提示，建议根据案例修改
$("[data-val=true][ajax-url]").blur(function () {
if (check(this)) {
var name = $(this).attr("name");
var msg = $(this).attr("ajax-check-msg");
$.post($(this).attr("ajax-url"), { ajaxparam: $(this).val() }, function (data) {
if (data != "ok") {
$("[data-valmsg-for=" + name + "]").html(msg);
} else {
$("[data-valmsg-for=" + name + "]").html("");
}
});
}
});
使用案例
<div>
<label for="UPhone">用户电话：</label>
<input type="text" name="UPhone" id="userphone" ajax-check-msg="*该手机号已存在" ajax-url="../Util/AjaxCheckPhone" />
<span data-valmsg-for="UPhone" data-valmsg-replace="true">*</span>
</div>
（7）check()方法，字段验证方法，验证当前输入字段是否符合校验，返回结果，验证原理就是检测该字段下的span[data-valmsg-for]标签中的html文本是否为空，为空验证成功，否则验证失败
function check(ev) {
var name = $(ev).attr("name");
if ($(ev).val() != "" && $("span[data-valmsg-for=" + name + "]").html() == "") {
return true;
} else {
return false;
}
}
（8） check_all()，判断当前表单中的字段是否都输入合法，如果合法返回true，不合法返回false，可借此在表单提交时做出判断，全部合法则跳转。
// 判断是否通过校验
function check_all(ev) {
var form = $(ev).parents("form");
var b = true;
form.find("span[data-valmsg-for]").each(function () {
if ($(this).html() != "" || $("[name=" + $(this).attr("data-valmsg-for") + "]").val() == "") {
return b = false;
}
});
return b;
}
1451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
