今天给大家介绍的是当下很流行的框架layui中的一个小案例,就是形式表单监控提交并且使用ajax异步提交验证数据。在layui中我们想使用哪个模块就要layui.use({})的“形式”,函数;这种形式要引用表单内置模板、下面是HTML全部代码
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>注册& lt;/title>
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最大范围=1”比;
& lt;元name=肮丶省蹦谌?袄仔√臁痹?
& lt;元name=懊枋觥蹦谌?袄仔√觳┛?layui中使用形式表单监听异步验证注册”比;
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/__RES__/layui/css/layui.css " rel=巴獠縩ofollow”比;
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/__RES__/css/global.css " rel=巴獠縩ofollow”比;
& lt;/head>
& lt; body>
& lt; div class=" fly-header layui-bg-black”比;
& lt; div类=發ayui-container”比;
& lt;一个类=" fly-logo " href=" https://www.yisu.com/zixun/{: U(设备/getinfo)}“rel=巴獠縩ofollow”比;
& lt; img src=" https://www.yisu.com/zixun/__RES__/images/logo.png " alt=發ayui”比;
& lt;/a>
& lt; ul类=" layui-nav fly-nav-user”比;
& lt; !——未登入的状态——比;
& lt;李类=發ayui-nav-item”比;
& lt;一个类=" iconfont icon-touxiang layui-hide-xs " href=" https://www.yisu.com/zixun/user/login.html " rel=巴獠縩ofollow”祝辞& lt;/a>
& lt;/li>
& lt;李类=發ayui-nav-item”比;
& lt; a href=" https://www.yisu.com/zixun/{: U(设备/登录)}“rel=巴獠縩ofollow”rel=巴獠縩ofollow”在登入& lt;/a>
& lt;/li>
& lt;李类=發ayui-nav-item”比;
& lt; a href=" javascript:空白;“rel=巴獠縩ofollow”祝辞注册& lt;/a>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/div>
& lt; div class=" layui-container fly-marginTop”比;
& lt; div class=" fly-panel fly-panel-user”pad20>
& lt; div class=" layui-tab layui-tab-brief lay-filter”=坝没А北?
& lt; ul类=發ayui-tab-title”比;
& lt; li> & lt; a href=" https://www.yisu.com/zixun/{: U(设备/登录)}“rel=巴獠縩ofollow”rel=巴獠縩ofollow”在登入& lt;/a> & lt;/li>
& lt;李类=" layui-this "祝辞注册& lt;/li>
& lt;/ul>
& lt; div class=" layui-form layui-tab-content " id=癓AY_ucm”比;
& lt; div class=" layui-tab-item layui-show”比;
& lt; div class=" layui-form layui-form-pane”比;
& lt;形式方法=皃ost”比;
& lt; div类=發ayui-form-item”比;
& lt;标签=癓_username”class=發ayui-form-label祝辞手机& lt;/label>
& lt; div类=發ayui-input-inline”比;
& lt;输入类型="文本" id=" signuppassdata " name="电话"需要lay-verify=自动完成“需要的”=肮乇铡眂lass=發ayui-input”比;
& lt;/div>
& lt;/div>
& lt; div类=發ayui-form-item”比;
& lt;标签=癓_username”class=發ayui-form-label”在卡号& lt;/label>
& lt; div类=發ayui-input-inline”比;
& lt;输入类型="文本" id=" cardno " name=" cardno所需lay-verify=自动完成“需要的”=肮乇铡眂lass=發ayui-input”比;
& lt;/div>
& lt;/div>
& lt; div类=發ayui-form-item”比;
& lt;按钮类=" layui-btn " type="提交" lay-filter="注册" lay-submit=" " id=" signuppass祝辞立即注册& lt;/button>
& lt;/div>
& lt;/form>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt; div类=癴ly-footer”比;
& lt; p>开门社区2018,副本;& lt; a href=" http://www.100txy.com/" rel==捌降取薄巴獠縩ofollow”目标在100 txy.com出品& lt;/a> & lt;/p>
& lt; p> & lt; a href=" JavaScript:空白;“rel==捌降取薄巴獠縩ofollow”目标的在雷小天博客& lt;/a> & lt;/p>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/__PUBLIC__/mobile/js/jquery.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/__RES__/layui/layui.js "祝辞& lt;/script>
& lt; script>//监听提交
layui。使用(“形式”,函数(){
var=layui.form形式;
form.on(提交(注册),函数(数据){//layer.msg (JSON.stringify (data.field));//弹出json格式所有表单的值
var电话=data.field.phone;
var cardno=data.field.cardno;
如果(phone.length !=11) {
层。味精(“请输入有效的手机号码”,{图标:2});
返回错误;
}
var myreg=/^ (((13 [0 - 9] {1}) | (15 [0 - 9] {1}) | (18 [0 - 9] {1})) + \ d {8}) $/;
如果(! myreg.test(电话)){
层。味精(“请输入有效的手机号码”,{图标:2});
返回错误;
}
如果(cardno.length !=8) {
层。味精(“请输入有效的卡片内码!”,{图标:2});
返回错误;
}
. ajax({美元
类型:“文章”,
url:“index . php # 63; m=Home& c=Device&=ajax_reg”,
数据:“电话=" +电话+ ",cardno=" + cardno,
数据类型:“json”,
成功:功能(数据){
如果(data.status=='是的'){
层。味精(注册成功!”,{图标:1});
var url=" {: U(设备/getinfo)}”;//成功跳转的url
setTimeout (window.location.href=https://www.yisu.com/zixun/url, 2000);
其他}{
layer.msg(数据。味精,{图标:2});
}
},
});
返回错误;
});
});>
