EasyUi 用户名，远程校验是否已经存在.密码两次比对，限定文件上传类型，及完整登录注册页面

远程校验用户名是否存在

UserDao接口根据用户名查询 返回数量

int queryCountByUserName(String name);

mapper/UserDao.xml

<select id="queryCountByUserName" resultType="int">
       select count(id) from t_user where name=#{name}
</select>

UserService

boolean exists(User user);

UserServiceImpl查询数量>0返回true

    @Override
    public boolean exists(User user) {
        return this.userDao.queryCountByUserName(user.getName()) > 0;
    }

Model项目Controller接口

@RestController
@RequestMapping("/restUser")
public class RestUserController {
	@Autowired
    private UserService userService;
    @GetMapping(value = "/existsUser")
    public Boolean queryUserById(User user){
        //从数据库中查询
        return userService.exists(user);
    }
}

EasyUi项目Collector接口

@Controller
@RequestMapping(value = "/formUser")
public class FormUserController {
	@PostMapping(value = "/existsUser")
    @ResponseBody
    public boolean exists(User user) throws IOException {
        System.out.println(user);
        String url="http://localhost:端口号/项目名/restUser/existsUser?name={name}";
        Map<String, Object> params= new HashMap<String, Object>();
        params.put("name",user.getName());
        return !restTemplate.getForObject(url,Boolean.class,params);
    }
}

注册页面

<div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
        <input name="name"  class="easyui-textbox" data-options="required:true,validType:'remote[\'/项目名/formUser/existsUser\',\'name\']',prompt:'用户名',iconCls:'icon-man'"style="height:100%;width:100%">
    </div>

常用表单 用户、密码、性别、邮箱、日期、上传文件

<script>
    $("#user_register").form({
        url:"/UserEasyUi/formUser/registerUser",
        onSubmit: function(){
            console.log("----validate----")
            return $("#user_register").form("validate")
        },
        success:function(data){
            if (data==''){
                alert("registerUser error")
            }else{
                alert("registerUser success")
                location.href="http://localhost:8989/UserEasyUi/front/dialog.html"
            }
        }
    });

    $(function () {
        // $("#swbtn").switchbutton({
        //     onText:'男',
        //     offText:'女',
        //     width:100,
        //     height:30,
        //     handleWidth:40,
        //     handleText:'性别',
        //     checked:true,
        //     onChange:function (checked) {
        //         console.log(checked)
        //     }
        // });
        // $("#btn1").linkbutton({
        //     iconCls:'icon-ok',
        //     onClick:function () {
        //         $("#swbtn").switchbutton("check")
        //     }
        // });
        // $("#btn2").linkbutton({
        //     iconCls:'icon-ok',
        //     onClick:function () {
        //         $("#swbtn").switchbutton("uncheck")
        //     }
        // });
 //<!--        <input name="sex" id="swbtn" style="height: 100%;width: 100%">-->
  //              <!--        <a id="btn1">选男</a>-->
     //           <!--        <a id="btn2"> 选女</a>-->

        $('#fb').filebox({
            filename:'multipartFile',
            buttonText: '选择文件',
            buttonAlign: 'right'
        })
    })
</script>
<form id="user_register" method="post" enctype="multipart/form-data" >
   <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
        <input name="name"  class="easyui-textbox" data-options="required:true,validType:'remote[\'/UserEasyUi/formUser/existsUser\',\'name\']',prompt:'用户名',iconCls:'icon-man'"style="height:100%;width:100%">
   </div>
   <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
             <input id="register_pwd1"  name="password"  class="easyui-passwordbox" data-options="required:true,validType:'fixedLength[6]',prompt:'密码',iconCls:'icon-lock'" style="height: 100%;width: 100%" >
    </div>
    <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
            <input class="easyui-passwordbox"  data-options="required:true,prompt:'重复输入',validType:'isSame[\'register_pwd1\']',iconCls:'icon-lock'" style="height: 100%;width: 100%" >
    </div>
    <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
        <input id="user_sex" name="sex" class="easyui-switchbutton" data-options="required:true,handleText:'性别',onText:'男',offText:'女'"   style="height: 100%;width: 100%">
    </div>
    <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
        <input id="fb" name="multipartFile" data-options="required:true,prompt:'选择文件'" style="height: 100%;width: 100%">
    </div>
    <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
        <input type="text" name="birthday" class="easyui-datebox" data-options="required:true,prompt:'出生日期'"style="height: 100%;width: 100%">
    </div>
    <div style="height: 40px;margin-top: 5px;margin-bottom: 10px;padding: 0 10% 0 10%">
        Email：<input name="email" class="easyui-validatebox" data-options="required:true,validType:'email',prompt:'邮箱'" style="height: 100%;width: 100%">
    </div>
</form>

密码两次比对详讲

引入validata.form.js配置文件

$.extend($.fn.validatebox.defaults.rules, {
    //最小长度是！
    minLength: {
        validator: function(value, param){
            console.log("value:"+value+" ,param:"+param)
            return value.length == param[0];
        },
        message: '请输入{0}字符.'
    },
    //固定长度是！
    fixedLength: {
        validator: function(value, param){
            console.log("value:"+value+" ,param:"+param)
            return value.length == param[0];
        },
        message: '请输入{0}字符.'
    },
    //两次密码是否一样
    isSame: {
        validator: function(value, param){
            return  $("#"+param[0]).passwordbox("getValue") == value;
        },
        message: '两次密码输入不正确！'
    },
    //设置文件上传规定格式
    isImage: {
        validator: function(value, param){
            var regExp=/.*\.(png|jpg|gif)$/i
            return  regExp.test(value)
        },
        message: '仅仅支持png、jpg、gif结尾的文件'
    }
});

两个密码框，上传文件div

 <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
         <input id="register_pwd1"  name="password"  class="easyui-passwordbox" data-options="required:true,validType:'fixedLength[6]',prompt:'密码',iconCls:'icon-lock'" style="height: 100%;width: 100%" >
</div>
<div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
         <input class="easyui-passwordbox"  data-options="required:true,prompt:'重复输入',validType:'isSame[\'register_pwd1\']',iconCls:'icon-lock'" style="height: 100%;width: 100%" >
 </div>
 <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
        <input  class="easyui-filebox"  name="multipartFile" data-options="validType:'isImage'" style="height: 100%;width: 100%" >
 </div>

主导

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户综合分析系统</title>
    <link rel="icon" href="http://static.baizhiedu.com/baizhiedu2019/pc/picture/icon-title.png" type="image/x-icon">

    <link rel="stylesheet" type="text/css" href="/UserEasyUi/static/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/UserEasyUi/static/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/UserEasyUi/static/easyui/themes/color.css">

    <script type="text/javascript" src="/UserEasyUi/static/common/jquery.min.js"></script>
    <script type="text/javascript" src="/UserEasyUi/static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/UserEasyUi/static/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/UserEasyUi/static/common/validata.form.js"></script>
    <script type="text/javascript" src="/UserEasyUi/static/common/plugin.js"></script>
	 <script>
       $(function () {
           $("#login_register_window").window({
               title:"系统入口",
               width:'30%',
               height:300,
               iconCls:"icon-logo",
               draggable:false,
               top:120,
               modal:true,
               closable:false,
               minimizable:false,
               maximizable:false,
               collapsible:false,
               resizable:false
           })
           $('#user_login_register_tb').tabs({
               onSelect:function(title){
                   var height=""
                   if(title=="用户登录"){
                       height=280
                   }else{
                       height=460
                   }
                   $("#login_register_window").window('resize',{height: height})
               }
           });
       })
    </script>
</head>
<body style="background: url('http://www.uimaker.com/uploads/userup/11888/1332152557-6358.png')">
    <div id="login_register_window">
        <div id="user_login_register_tb"   class="easyui-tabs" data-options="border:false,fit:true">
            <div title="用户登录" data-options="href:'login.html',cache:false"></div>
            <div title="用户注册" data-options="href:'register.html',cache:false"></div>
        </div>
    </div>
<!--     <div id="login_dialog"></div>-->
<!--     <div id="register_dialog"></div>-->
</body>
</html>

登录

<script>
    $("#user_login_form").form({
        url: "/UserEasyUi/formUser/userLogin",
        onSubmit: function () {
            // console.log("----validate----")
            // return $("#user_login_form").form("validate")
            var validata= $("#user_login_form").form('validate')
            if(validata){
                $.messager.progress({title:'Please waiting', msg:'Loading data...'});
            }
            return  validata
        },
        success: function (data) {
            $.messager.progress('close');
            if (data == '') {
                location.href = "http://localhost:8989/UserEasyUi/main/main.html"
            } else if (data.toString().indexOf("code error") >= 0) {
                alert("code error")
            } else if (data.toString().indexOf("user or password error") >= 0) {
                alert("user or password error")
            }
        }
    })
    $(function () {
        $("#img").click(function () {
            $(this).prop("src", "/UserEasyUi/formUser/userCode?xxx=" + Math.random());
        })
    })
    //登录按钮事件
    $("#login_btn1").linkbutton({
        onClick:function () {
            $("#user_login_form").form("submit")
        }
    })
    //登录按钮事件
    $("#login_btn2").linkbutton({
        onClick:function () {
            $("#user_login_form").form("reset")
        }
    })
</script>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'center',border:false" style="padding:10px;">
        <form id="user_login_form" method="post">
            <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
                <input name="name" class="easyui-textbox" data-options="required:true,prompt:'用户名',iconCls:'icon-user'"
                       style="height: 100%;width: 100%">
            </div>
            <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
                <input name="password" class="easyui-passwordbox"
                       data-options="required:true,prompt:'密码',iconCls:'icon-lock'" style="height: 100%;width: 100%">
            </div>
            <div style="height:40px;margin-top: 5px;margin-bottom: 10px;padding: 0 10% 0 10%">
                <div style="float: left;width: 60%;height:100%;background-color: #3d3d3d">
                    <img id="img" src="/UserEasyUi/formUser/userCode" style="height: 100%;width: 100%">
                </div>
                <div style="float: left;width: 40%;height:100%;">
                    <input name="code" class="easyui-textbox"
                           data-options="prompt:'请输入4位验证码',required:true,required:true,validType:'minLength[4]'"
                           style="height: 100%;width: 100%">
                </div>
            </div>
        </form>
    </div>
    <div data-options="region:'south',border:true" style="text-align:right;padding:5px 0 5px 0;height: 45px">
        <a id="login_btn1" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:true"
           href="javascript:void(0)" style="width:80px">登录</a>
        <a id="login_btn2" class="easyui-linkbutton" data-options="iconCls:'icon-redo',plain:true"
           href="javascript:void(0)" style="width:80px">重置</a>
    </div>
</div>

注册

<script>
    $("#user_register_form").form({
        url: "/UserEasyUi/formUser/registerUser",
        onSubmit: function () {
            // console.log("----validate----")
            // return $("#user_register").form("validate")
            var validata= $("#user_register_form").form('validate')
            if(validata){
                $.messager.progress({title:'Please waiting', msg:'Loading data...'});
            }
            return  validata
        },
        success: function (data) {
            $.messager.progress('close');
            if (data == '') {
                alert("registerUser error")
            } else {
                alert("registerUser success and go to login")
                location.href = "http://localhost:8989/UserEasyUi/main/main.html"
            }
        }
    });
    $(function () {
        $('#fb').filebox({
            filename: 'multipartFile',
            buttonText: '选择文件',
            buttonAlign: 'right'
        })
        //注册按钮事件
        $("#register_btn1").linkbutton({
            onClick: function () {
                $("#user_register_form").form("submit")
            }
        })
        //重置按钮事件
        $("#register_btn2").linkbutton({
            onClick: function () {
                $("#user_register_form").form("reset")
            }
        })
    })
</script>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'center',border:false" style="padding:10px;">
        <form id="user_register_form" method="post" enctype="multipart/form-data">
            <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
                <input name="name" class="easyui-textbox"
                       data-options="required:true,validType:'remote[\'/UserEasyUi/formUser/existsUser\',\'name\']',prompt:'用户名',iconCls:'icon-man'"
                       style="height:100%;width:100%">
            </div>
            <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
                <input id="register_pwd1"  name="password"  class="easyui-passwordbox" data-options="required:true,validType:'fixedLength[6]',prompt:'密码',iconCls:'icon-lock'" style="height: 100%;width: 100%" >
            </div>
            <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
                <input class="easyui-passwordbox"  data-options="required:true,prompt:'重复输入',validType:'isSame[\'register_pwd1\']',iconCls:'icon-lock'" style="height: 100%;width: 100%" >
            </div>
            <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
                <!--        <input name="sex" id="swbtn" style="height: 100%;width: 100%">-->
                <!--        <a id="btn1">选男</a>-->
                <!--        <a id="btn2"> 选女</a>-->
                <input id="user_sex" name="sex" class="easyui-switchbutton"
                       data-options="required:true,handleText:'性别',onText:'男',offText:'女'"
                       style="height: 100%;width: 100%">

            </div>
            <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
                <input id="fb" name="multipartFile" data-options="required:true,validType:'isImage',prompt:'选择文件'" style="height: 100%;width: 100%">
            </div>
            <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
                <input type="text" name="birthday" class="easyui-datebox" data-options="required:true,prompt:'出生日期'"
                       style="height: 100%;width: 100%">
            </div>
            <div style="height: 40px;margin-top: 5px;margin-bottom: 10px;padding: 0 10% 0 10%">
<!--                Email：<input name="email" class="easyui-validatebox"-->
<!--                             data-options="required:true,validType:'email',prompt:'邮箱'"-->
<!--                             style="height: 100%;width: 100%">-->
                <input class="easyui-textbox" name="email" data-options="required:true,validType:'email',prompt:'邮件',iconCls:'icon-email'" style="height: 100%;width: 100%" >
            </div>
        </form>
    </div>
    <div data-options="region:'south',border:true" style="text-align:right;padding:5px 0 5px 0;height: 45px">
        <a id="register_btn1" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:true"
           href="javascript:void(0)" style="width:80px">注册</a>
        <a id="register_btn2" class="easyui-linkbutton" data-options="iconCls:'icon-redo',plain:true"
           href="javascript:void(0)" style="width:80px">重置</a>
    </div>
</div>

其中用户名长度插件 密码长度，两次比较插件，文件类型上传插件

$.extend($.fn.validatebox.defaults.rules, {
    //最小长度是！
    minLength: {
        validator: function(value, param){
            console.log("value:"+value+" ,param:"+param)
            return value.length == param[0];
        },
        message: '请输入{0}字符.'
    },
    //固定长度是！
    fixedLength: {
        validator: function(value, param){
            console.log("value:"+value+" ,param:"+param)
            return value.length == param[0];
        },
        message: '请输入{0}字符.'
    },
    //两次密码是否一样
    isSame: {
        validator: function(value, param){
            return  $("#"+param[0]).passwordbox("getValue") == value;
        },
        message: '两次密码输入不正确！'
    },
    isImage: {
        validator: function(value, param){
            var regExp=/.*\.(png|jpg|gif)$/i
            return  regExp.test(value)
        },
        message: '仅仅支持png、jpg、gif结尾的文件'
    }
});