工学1号馆

今天实践了一下semantic-ui表单验证的相关操作，这里记录一下。

在form表单中

<form action="" class="ui form" method="post">
	<div class="ui error message" id="errorMessage"></div>
	<input type="hidden" name="type" value="normal" />
	<div class="field required">
		<label>文档名称</label> <input id="title" name="title" placeholder="不超过100个字符"
			type="text" />
	</div>
	<div class="field required">
		<label>文档标识</label> <input name="name" id="name"
			placeholder="只能包含小写字母、数字，以及“-”和“_”符号,并且只能小写字母打头" type="text" />
	</div>
	<div class="field">
		<label>简介</label>
		<textarea name="description" id="description" rows="2"></textarea>
	</div>
	<div class="grouped fields">
		<label>可见性</label>
		<div class="field">
			<div class="ui radio checkbox">
				<input type="radio" name="visibility_level" id="checkbox" value="20"
					checked="checked" /> <label> 公开 <span
					class="help-block">任何人都可以阅读该文档</span>
				</label>
			</div>
		</div>
		<div data-selector="visibility level protected" class="field"
			style="display: none;">
			<div class="ui radio checkbox">
				<input type="radio" name="visibility_level" value="10" /> <label>
					内部 <span class="help-block">企业内部人员都可以阅读该文档</span>
				</label>
			</div>
		</div>
		<div class="field">
			<div class="ui radio checkbox">
				<input type="radio" name="visibility_level" value="0" /> <label>
					私有 <span class="help-block">非文档成员无法访问私有文档的任何信息</span>
				</label>
			</div>
		</div>
	</div>
	<div class="field">
		<button id="send" type="submit" class="ui button primary fluid">创建</button>
	</div>
 </form>

js代码如下：

<script>
$('.ui.eleven.wide.column form')
.form({
  on: 'blur',
  fields: {
    title: {
      identifier  : 'title',
      rules: [
        {
          type   : 'empty',
          prompt : '文档名称不能为空'
        }
      ]
    },
    name: {
      identifier  : 'name',
      rules: [
        {
          type   : 'empty',
          prompt : '文档标识不能为空'
        }, 
        {
            type   : 'regExp[/^[a-z]\w{5,17}$/]',
            prompt : '文档标识只能包含小写字母、数字，以及“-”和“_”符号,并且只能小写字母开头，长度为4-64个字符'
         }
      ]
    }
  }
});

</script>