SemanticUI框架下表单非空验证的简易方法

不知道在其他UI框架或者不用UI框架下是否生效,由于这个非空验证生成信息的div使用的是SemanticUI框架的语法,所以暂时不确定,待以后验证…
先引入jquery.js文件
然后看如下:

<script>
// 表单非空验证
  $('.ui.form').form({
    fields : {
      username : {
        identifier: 'username',
        rules: [{
          type : 'empty',
          prompt: '请输入用户名'
        }]
      },
      password : {
        identifier: 'password',
        rules: [{
          type : 'empty',
          prompt: '请输入密码'
        }]
      }
    }
  });
  
  
  
</script>

比如在登录界面做表单验证,那么在登录按钮下加一个div(这个div还是处在同一个form中),格式如下:

<div class="ui error mini message"></div>

然后非空验证的效果如图:
在这里插入图片描述看下界面代码:
在这里插入图片描述之前声明的<div class="ui error mini message"></div>里面已经填充了一个ul无序列表。

发布了14 篇原创文章 · 获赞 15 · 访问量 509

猜你喜欢

转载自blog.csdn.net/CodingNO1/article/details/104510932
今日推荐