layui的校验小技巧1

现在是要用layui给表单做校验，有一个效果是这样的，如果外部链接选择“是”，则显示下面填外部链接的框，并且这个框要加校验，校验为必填。

如果外部链接选择“否”，则把下面的外部链接的框隐藏，并且要把这个框的非空校验去掉，为什么要特意去掉非空校验呢？把它隐藏不是可以了吗？不是的，就算隐藏了，它还是会校验的，所以要去掉。

这个隐藏和显示的动态效果很容易做，只要js控制就可以了。但是显示的时候，加校验，隐藏的时候，把校验去掉，这个好做吗？好做啊，直接用js把这个校验的属性动态设为空值，不就可以了吗？答案是：不可以。

为什么？下面演示：
1.html标签：

//外部链接的单选radio

<input id="islink" type="radio" name="iconLinkStatus" value="1" title="是" 
lay-filter="iconLinkStatus">
<input id="notlink" type="radio" name="iconLinkStatus" value="0" title="否" 
lay-filter="iconLinkStatus" checked>

//外部链接的框

<input id=”waibu” type="text" name="iconLink" autocomplete="off" style="display: ;"  
lay-verify="" class="layui-input" >

2.js代码：
首先当点击“是”时，应该把下面的框显示，并且加上非空校验
（1）让它显示：就是通过js设置display值为block
（2）让它加上非空校验，就是通过js设置lay-verify值为iconLink
注意：iconLink是自定义的layui规则的非空判断，如下：

form.verify({
    iconLink:[
		/\S/,
		"请输入外部链接"
	],
});

这两个点，要好好演示一下：
第1点：就是$(“#waibu”).style.display = ""，这个很简单，没问题
第2点：是不是$(“#waibu”).style.lay-verify = "iconLink" 这样呢？
出问题了，为什么？lay-verify里面有短横杆，这个东西js不懂，js理解不了短横杆，就报错了。所以错就错在layui的校验属性里有横杆，导致js不认识。怎么办？这个属性是layui定好的，改不了的。所以这种直接通过js动态加样式的样式行不通。

下面介绍一个解决问题的小技巧：
既然常规的思路解决不了问题，现在要换个角度思考问题。

解决思路：在外部链接里直接写上校验规则lay-verify="iconLink"，但是在iconLink校验规则里面就不要写那么简单了，要写多一个判断。我们知道自定义的校验规则是通过return返回错误信息的，所以这个return，不能随便就return了，要做判断，就是当上面的单选框选择为“是”时，才会return，这样iconLink校验才会起作用。当上面的单选框选择为“否”时，就不会return了，这样iconLink校验就没效果了，只是摆设而已。

演示代码：
1.html标签：

//外部链接的单选radio

<input id="islink" type="radio" name="iconLinkStatus" value="1" title="是"
 lay-filter="iconLinkStatus">
<input type="radio" name="iconLinkStatus" value="0" title="否" 
lay-filter="iconLinkStatus" checked>

//外部链接的框

<input type="text" name="iconLink" autocomplete="off" placeholder="请输入外部链接" 
lay-verify="iconLink" class="layui-input" >

2.js代码：

form.verify({
	iconLink:function(value,item){
		if($("#islink:radio").is(":checked") && !/\S/.test(value)){
			return "请输入外部链接";
		}
	}
});

关键代码：$("#islink:radio").is(":checked")
意思是：这个单选框被选中