BUI输入框验证

本文主要记录在使用BUI开发页面时对输入框的处理。

本文主要说明如下功能的使用方法：

1. 非空验证
2. 输入内容提示

非空验证

1、一般输入表单时，要求某些必填字段不能为空，效果如下



主要代码:

<form id="J_Form" class="form-horizontal">
  <div class="row">
    <div class="control-group span8">
      <label class="control-label"><s>*</s>姓名：</label>
      <div class="controls">
        <input name="id" type="text" data-rules="{required:true}" data-messages="{required:'姓名不能为空'}" class="control-text">
      </div>
    </div>
  </div>
</form>

从代码中看出只要在增加data-rules属性，并在属性中增加 {required:true} 即可，这样当焦点离开输入框时，下方就会出现不能为空的提示。具体的提示内容可在 data-messages="{required:'姓名不能为空'}" 中定义。

当然提示语句也可不指定，默认为“不能为空”。如下

如果只是这样，你会发现完全不起作用，这是因为还需要使用BUI的框架进行渲染，渲染代码如下：

<script type="text/javascript"> 
    BUI.use('bui/form',function(Form){
        form = new Form.Form({
            srcNode : '#J_Form'});
        form.render();
    });
</script>

这样必填提示就会生效，当焦点离开输入框式，下方就会出现必填的提示。

2、输入规则提示

在输入表单时，希望在表单输入的地方以较暗的灰色字体显示提示内容，如下

代码如下：

<div class="row">
  <div class="control-group span8">
    <label class="control-label"><s>*</s>身份证号：</label>
    <div class="controls">
      <input name="id" type="text" data-rules="{required:true}" data-tip="{text:'只能输入18位身份证号'}" class="control-text">
    </div>
  </div>
</div>

只需要增加 data-tip="{text:'只能输入18位身份证号'}" 即可。

当然，要实现此功能，也是需要使用javascript代码进行渲染，代码同上述的必填功能渲染（只需要渲染一次即可）。

使用过程中发现下面这个场景下会有问题

比如本来form是隐藏的，当我点击新增按钮时，才将form可见，此时输入提示在初始化时并不可见，在焦点移开后才可见，如：

代码如下：

<button class="button button-primary" id="addButton">新增</button>
<div id="addForm" class="hide">
    <form id="J_Form" class="form-horizontal">
        <div class="row">
          <div class="control-group span8">
            <label class="control-label"><s>*</s>身份证号：</label>
            <div class="controls">
              <input name="id" type="text" data-rules="{required:true}" data-tip="{text:'只能输入18位身份证号'}" class="control-text">
            </div>
          </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    BUI.use('bui/form',function(Form){
        form = new Form.HForm({
                    srcNode : '#J_Form'});
        form.render();
        function add(){$("#addForm").removeClass("hide");}
        $("#addButton").live("click", add);
    });
</script>

后来经过多次尝试，发现跟hide class有关，如果一个div的类为hide，则渲染的时候，tip语句是不会显示的。

解决方式如下：

既然hide时渲染失败，就先显示，再渲染。即：

<script type="text/javascript">
    BUI.use('bui/form',function(Form){
        form = new Form.HForm({
                    srcNode : '#J_Form'});
        function add(){
            $("#addForm").removeClass("hide");
            form.render();
        }
        $("#addButton").live("click", add);
    });
</script>

这样就显示啦。

 

第一次在工作中使用BUI框架，也是第一次做web相关的项目，嗯，就这样。