Vue.js Asp.NET核心表单验证

时间:2018-02-26 03:11:21

标签: asp.net-core vuejs2

我目前正在学习使用asp .net核心的vuejs。 我正在做一些表单验证并添加一些错误消息。

错误消息来自服务器端,这是我的示例代码:

 [HttpPost]
    public async Task<IActionResult> AddUser([FromBody] UserModel user)
    {

        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        if (_context.Users.Any(u => u.UserName == user.UserName))
        {
            ModelState.AddModelError("UserName", "Username is already in used");
            return BadRequest(ModelState);
        }

        try
        {
            var userDto = new User
            {
                FirstName = user.FirstName,
                LastName = user.LastName,
                Password = user.Password,
                UserName = user.UserName
            };
            _context.Users.Add(userDto);
            await _context.SaveChangesAsync();
        }
        catch(Exception e)
        {
            ModelState.AddModelError("Saving Error", string.Format("Error in saving user. \nDetails:\n {0}", e.Message));
            return BadRequest(ModelState);
        }

        return Ok();
    }

在视图中:

<form v-on:submit.prevent="SaveUser()">

        <div class="form-group">
            <label for="userName">User Name</label>
            <input class="form-control" type="text" id="userName" placeholder="Username" v-model="userName" required :disabled="isEditMode" />
        </div>
        <div class="form-group">
            <label for="userName">First Name</label>
            <input class="form-control" type="text" id="firstName" placeholder="First Name" v-model="firstName" required />
        </div>
        <div class="form-group">
            <label for="userName">Last Name</label>
            <input class="form-control" type="text" id="lastName" placeholder="Lastname" v-model="lastName" required />
        </div>
        <div v-if="!isEditMode">
            <div class="form-group">
                <label for="userName">Password</label>
                <input class="form-control" type="password" id="password" placeholder="Password" v-model="password" required />
            </div>
        </div>
        <!--TODO: Distribute to each control-->
        <div v-if="hasError">
            <ul v-for="error in errors">
                <li style="color: red;" v-for="detail in error">{{detail}}</li>
            </ul>
        </div>
        <button type="submit" class="btn btn-primary">Save</button>
        <button type="button" @click="backToList()" class="btn btn-danger">Cancel</button>
    </form>

基本上我正在从服务器端进行验证。 目前,错误消息显示在控件下方 我需要将所有错误消息与输入内联。 你能帮我解决这个问题吗?

提前致谢。

0 个答案:

没有答案