vue-autoui自匹配webapi的UI控件的实现

{
Console.WriteLine($"name:{name} pwd:{pwd} saveStatus:{saveStatus}");
return name == "admin";
}

注册

接下来定义一个信息多些的注册界面

<div>
  <auto-form ref="login" url="/register" v-model="register.data" size="mini" @completed="onCompleted">
  </auto-form>
  <el-button size="mini" @click="if($refs.login.success())register.post()">
    注册
  </el-button>
</div>

在UI定义上基于没什么变化，只是调整一下对应的

url

地址，在这里多了一下

completed

事件，这个事件主要是通过接口加载UI信息才会触发的。对应功能的

javascript

代码

data(){
      return {
        register: new beetlexAction('/register', {}),
        checkConfirmPassword: (rule, value, callback) => {
          var password = this.$refs.login.getField('Password');
          var cpassword = this.$refs.login.getField('ConfirmPassword');
          if (password.value != cpassword.value)
            callback(new Error('确认密码不正确!'));
          else
            callback();
        },
      }
    },
    methods: {
      onCompleted(){
        this.$refs.login.getField('ConfirmPassword').rules.push({ validator: this.checkConfirmPassword, trigger: 'blur' });
      },
    },
    mounted() {
      this.register.requested = (r) => {
        alert(JSON.stringify(r));
      };
    }

代码主要是定密码和确认密码的对比验证，接下来看一下后台注册对应的接口

[Post]  public RegisterDto Register(RegisterDto register)
  {
      Console.WriteLine(Newtonsoft.Json.JsonConvert.SerializeObject(register));
      return register;
  }
  public class RegisterDto
  {
    [Input(Label = "用户名", Eof = true)]    [Required("用户名不能为空")]    [DataRange("用户名的必须大于3个字符", Min = 3)]    public string Name { get; set; }
    [Input(Label = "邮箱地址", Eof = true)]    [Required("邮件地址无效", Type = "email")]    public string Email { get; set; }
    [Input(Label = "密码", Eof = true, Type = "password")]    [Required("输入密码")]    public string Password { get; set; }
    [Input(Label = "确认密码", Eof = true, Type = "password")]    [Required("输入确认密码")]    public string ConfirmPassword { get; set; }
    [GenderInput(Label = "性别", Value = "男", Eof = true)]    public string Gender { get; set; }
    [Required("选择所在城市")]    [CityInput(Label = "城市", Eof = true)]    public string City { get; set; }								 
 3/5   首页 上一页 1 2 3 4 5 下一页 尾页