【ITOO技术篇】——easyui表单验证

需求：

　　 我们每让用户输入一个字段，都要保证该字段合法有效。但是这些东西不能让用户自己来判断，所以我们在文本

框 中应该有所限制。下面小编以电话号码限制为例，说一下表单验证的方法。

效果：

　　

我们要达到的预期效果就是，当我们输入不正确的手机号时，点确定，无法将信息存入数据库。只有在数据全部显示

正确的情况下才能输入。下面我们来看一下代码的实现。

代码：

  <tr>
     <th style="width: 35%; height: 100%; text-align: right; font-weight: normal;">电话号码：</th>
      <th style="width: 65%;">
       <input id="TelNum" class="easyui-numberbox" type="text" name="mobile"  data-options="validType:'mobile',"  style="width: 160px; height : 20px"></th>
        <th style="width: 35%; height: 100%; text-align: right; font-weight: normal;">@ViewData["TelNum"]</th>
 </tr>

在JavaScript中写，这是对输入框的提示

<script type="text/javascript">
    //手机号验证。
    $.extend($.fn.validatebox.defaults.rules, {
        //移动手机号码验证
        mobile: {//value值为文本框中的值
            validator: function (value) {
                var reg = /^1[3|4|5|8|9]\d{9}$/;
                return reg.test(value);
            },
            message: '请输入正确的手机号'
        },
    });

   var reValue = document.getElementById("TelNum").value;
                    var IsRight = /^1[3|4|5|8|9]\d{9}$/.test(reValue);//正则表达式判断手机号格式
                    if (IsRight == false) {
                        $.messager.alert('提示', '请输入符合提示规则的内容！');
                        return;
                    }     

下面是jQuery easyui官网上给出的方法

	<div style="padding:3px 2px;border-bottom:1px solid #ccc">Form Validation</div>
	<form id="ff" method="post">
		<div>
			<label for="name">Name:</label>
			<input class="easyui-validatebox" type="text" name="name" required="true"></input>
		</div>
		<div>
			<label for="email">Email:</label>
			<input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
		</div>
		<div>
			<label for="subject">Subject:</label>
			<input class="easyui-validatebox" type="text" name="subject" required="true"></input>
		</div>
		<div>
			<label for="message">Message:</label>
			<textarea name="message" style="height:60px;"></textarea>
		</div>
		<div>
			<input type="submit" value="Submit">
		</div>
	</form>

当表单无效时阻止表单提交

	$('#ff').form({
		url:'form3_proc.php',
		onSubmit:function(){
			return $(this).form('validate');
		},
		success:function(data){
			$.messager.alert('Info', data, 'info');
		}
	});

   以上就是关于表单验证的所有内容啦。对于每一个easyui 实在是只有想不到的，没有办不到的