官方代码拿过来
[https://www.layui.com/doc/modules/form.html]
注意:官网找内置模块当中的表单,不是页面元素里的表单,里边有表单验证小链接
关键属性值
1.required(写在内联)
注意: 这个不是验证规则lay-verify里的“required | phone”等,它是单独的属性 无值,我只知道它包含鼠标hover上面提示文字“请输入文本”,因项目需要,英文版不能显示中文提示,所以把它撤了
<input type="text" name="title" lay-verify="required|username" placeholder="请输入" autocomplete="off" class="layui-input">
2.lay-verType(写在内联)
msg是默认样式, tips是紧贴着元素的黑色标签,alert是普通的弹出框
3.lay-verify(写在内联)
“required”表示必填 ,后面用 | 隔开可以添加多条验证规则,看上图自带的已有几种(iPhone,email等),不过根据需求还是要自定义验证,比如它这个phone验证的默认是11位数字,如果你需要国际电话以及座机等,那么就需要另外定义(如下不是国际电话座机的验证,只是举例如何自定义规则,以及提示信息):
<!-- ******************************* 表单验证 、监听 ****************************** -->
<script>
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
// layer.msg(JSON.stringify(data.field));
return false;
});
// 验证
form.verify({
username: function(value, item){ //value:表单的值、item:表单的DOM对象
if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
return '姓名不能有特殊字符';
}
},
//数组形式:两个值分别代表:[正则匹配(用 / / 包裹起来)、匹配不符时的提示文字]
country: [
/^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$/
,'国籍不能有特殊字符'
],
/* phone:[
/^1[34578]\d{9}$/,
'请输入正确的手机号码'
] */
time_len: [
/^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$/
,'时长不能有特殊字符'
],
language: [
/^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$/
,'语言不能有特殊字符'
],
});
});
</script>
下拉框默认有个“请选择”,如何修改:
<div class="layui-form-item">
<label class="layui-form-label">Interview Format</label>
<div class="layui-input-block">
<select name="inteview_type" lay-verify="required">
<!-- 这里的 Choice 是加上去的 -->
<option value="" readonly>Choice</option>
<option value="0">Paper Interview</option>
<option value="1">Face-to-Face interview</option>
<option value="2">Other</option>
</select>
</div>
</div>
给第一个option添加内容,同时切记加个readonly,我当时浏览器审查元素,用它的类各种css以及js控制都不起作用,因为那个“请选择”是它placeholder内容,改不了