关键词搜索

源码搜索 ×
×

layui⽂本框,⼿机,邮箱,textarea等格式的验证

发布2022-05-31浏览530次

详情内容

  1. <formclass="layui-form"action="">
  2. <divclass="layui-form-item">
  3. <labelclass="layui-form-label">反馈主题</label>
  4. <divclass="layui-input-block">
  5. <inputname="title"class="layui-input"type="text"placeholder="请输⼊标题"autocomplete="off"lay-
  6. verify="title">
  7. </div>
  8. </div>
  9. <divclass="layui-form-item">
  10. <labelclass="layui-form-label">姓名</label>
  11. <divclass="layui-input-block">
  12. <inputname="fname"class="layui-input"type="text"placeholder="请输⼊姓名"autocomplete="off"lay-
  13. verify="fname">
  14. </div>
  15. </div>
  16. <divclass="layui-form-item">
  17. <labelclass="layui-form-label">⼿机</label>
  18. <divclass="layui-input-block">
  19. <inputname="phone"class="layui-input"type="tel"autocomplete="off"placeholder="请输⼊⼿机"lay-
  20. verify="phone">
  21. </div>
  22. </div>
  23. <divclass="layui-form-item">
  24. <labelclass="layui-form-label">邮箱</label>
  25. <divclass="layui-input-block">
  26. <inputname="email"class="layui-input"type="text"autocomplete="off"placeholder="请输⼊邮箱"lay-
  27. verify="email">
  28. </div>
  29. </div>
  30. <divclass="layui-form-item">
  31. <labelclass="layui-form-label">单选框</label>
  32. <divclass="layui-input-block">
  33. <inputname="sex"title="男"type="radio"checked=""value="男">
  34. <inputname="sex"title="⼥"type="radio"value="⼥">
  35. <inputname="sex"title="保密"type="radio"value="密">
  36. </div>
  37. 33.
  38. </div>
  39. <!--<divclass="layui-form-item layui-form-text">
  40. <labelclass="layui-form-label">普通⽂本域</label>
  41. <divclass="layui-input-block">
  42. <textareaclass="layui-textarea"placeholder="请输⼊内容">请输⼊内容</textarea>
  43. </div>
  44. </div>-->
  45. <divclass="layui-form-item layui-form-text">
  46. <labelclass="layui-form-label">内容</label>
  47. <divclass="layui-input-block">
  48. <textareaclass="layui-textarea layui-hide"name="contact"id="LAY_demo_editor"lay-
  49. verify="contact"></textarea>
  50. </div>
  51. </div>
  52. <divclass="layui-form-item">
  53. <divclass="layui-input-block">
  54. <buttonclass="layui-btn"lay-filter="demo2"lay-submit="">跳转式提交</button>
  55. <buttonclass="layui-btn"lay-filter="demo1"lay-submit="">⽴即提交</button>
  56. <buttonclass="layui-btn layui-btn-primary"type="reset">重置</button>
  57. </div>
  58. </div>
  59. </form>
  60. js验证代码
  61. [html]
  1. <script>
  2. layui.use(['form', 'layedit', 'laydate'], function(){
  3. var form = layui.form()
  4. ,layer = layui.layer
  5. ,layedit = layui.layedit
  6. ,laydate = layui.laydate;
  7. //⾃定义验证规则
  8. form.verify({
  9. title: function(value){
  10. if(value.length <5){
  11. return '标题⾄少得5个字符啊';
  12. }
  13. }, fname: function(value){
  14. if(value.length <4){
  15. return '请输⼊⾄少4位的⽤户名';
  16. }
  17. }, contact: function(value){
  18. if(value.length <4){
  19. return '内容请输⼊⾄少4个字符';
  20. }
  21. }
  22. ,phone: [/^1[3|4|5|7|8]\d{9}$/, '⼿机必须11位,只能是数字!']
  23. ,email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']
  24. });
  25. //创建⼀个编辑器
  26. layedit.build('LAY_demo_editor');
  27. //监听提交
  28. form.on('submit(demo1)', function(data){
  29. layer.alert(JSON.stringify(data.field), {
  30. title: '最终的提交信息'
  31. })
  32. return false;
  33. });
  34. });
  35. </script>

相关技术文章

点击QQ咨询
开通会员
返回顶部
×
微信扫码支付
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载