【连载】研究EasyUI系统——登陆页之TextBox控件概述

　　登陆页面中，用户名和密码的输入用到了textbox控件，即输入框。textbox控件继承自validatebox控件，validatebox控件具有输入验证功能，防止用户输入非法数据。
　　我们先来看一下如何构造一个textbox控件。

<form method="POST" id="frmLogin" >
    <div class="login_title">登陆注册页面FORM</div>
    <label class="login">用户名</label>
    <input class="easyui-textbox" name="loginUser" id="loginUser"
        data-options="iconCls:'icon-man',required:true,validType:'email'" />

    <label class="login">密码</label>
    <input class="easyui-textbox" name="loginPass" id="loginPass"
        type="password" data-options="iconCls:'icon-lock',required:true" />

    <a href="javascript:void(0);" onclick="submitForm();" style="width:80px;"
        class="easyui-linkbutton" data-options="iconCls:'icon-ok'" >登陆</a>
</form>

<script>
    function submitForm() {
        $("#frmLogin").form('submit',{
            url:"actionLogin.php",
            onSubmit:function() {
                return $(this).form('validate');
            },
            success:function(result) {
                var data = eval('(' + result + ')');
                if (data.success === 1) {
                    window.location.href = "index.php";
                } else {
                    $.messager.alert("提示",data.msg);
                }
            }
         });
    }

　　还是老规矩，我们去掉了大部分的CSS样式和用于美观的HTML代码，重点说明easyui控件。
　　我们只要在input标签内使用名为easyui-textbox的类，就能建立一个textbox控件，并在data-options中对textbox控件做一些必要的功能和视觉优化。iconCls:'icon-man'描述了textbox附带一个名为icon-man的图标；required:true表明这个textbox不能为空，必须要输入内容；validType:'email'告诉我们textbox的验证类型必须为email类型，如果用户输入非email格式的数据，就会报错。textbox自带的基本validType有email、url等。更复杂的验证类型我们在validatebox中说。
　　我们提交表单的时候将会调用submitForm方法，其中 $(this).form('validate')语句将会验证表单内所有的textbox控件，验证内容和格式是否符合要求，返回true或者false。如果textbox不在form内呢，可以通过textbox的validate方法进行验证，如 $("#loginUser").textbox('validate')。如果都符合要求，可直接提交表单。

　　上图就是textbox效果图，icon-man和icon-lock图标显示textbox最右边，如未输入任何内容，将出现“该输入项为必输项”提示，并且无法提交表单。